Stav Alfi Stav Alfi - 1 month ago 9
Javascript Question

Dividing div to 2 colums

I have seen some solutions to this problem but when I add inside the divs an angular2 component, it doesn't work.

Here is what I got so far:
enter image description here

Code:

<div id="container">
<div id="categoriesContainer">
<categories (onCategoryChanged)="categoryChanged($event)"></categories>
</div>
<div id="products-container">
<product-details *ngFor="let product of products$ | async" id="prodcut"
[product]="product"
[canAddProductToCart]="canAddToCart(product.$key) | async"
(onAddToCart)="addToCart($event)"></product-details>
<button md-button
*ngIf="!showCreateProductComponent"
id="create-product-button"
[disabled]="disableCreateProductButton$ |async"
(click)="showCreateProductComponent=true">
<i class="material-icons">add</i>
</button>
<create-product id="create-product"
(onCencel)="showCreateProductComponent=false"
(onCreateProduct)="onCreateProduct($event)"
*ngIf="showCreateProductComponent"></create-product>
</div>
<div style="clear: both"></div>
</div>


css:

//spliting the div to 2 columns
#container
{
border-style:solid;
border-width: 1px;
border-color: green;
padding: 10px;
margin: 10px
}
#categoriesContainer
{
width: 15%;
border-style: solid;
border-width: 1px;
border-color: blue;
float: left;
}
#products-container
{
border-style: solid;
border-width: 1px;
width: 85%;
border-color: red;
}

//for the angular2 compoennts
#prodcut
{
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#create-product
{
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#create-product-button
{
float: left;
margin-right: 10px;
margin-bottom: 10px;
}


Here is what I want: (the cards will be only in the red squer.)

enter image description here

Questions:


  1. How to fix this and why its working great when I remove the angular2 components and replace them with some simple html text?

  2. Can I summerise this code without effecting anything:

    <div id="categoriesContainer"
    style="width: 15%;border-style: solid;border-width: 1px;border-color: blue;float: left">
    <categories (onCategoryChanged)="categoryChanged($event)"></categories>





to:

<categories id="categoriesContainer"
style="width: 15%;border-style: solid;border-width: 1px;border-color: blue;float: left"
(onCategoryChanged)="categoryChanged($event)"></categories>


Thanks alot!

Answer

Simple using flexbox

*{box-sizing:border-box;}

#wrapper {
  display: flex;
}

#left, #right {
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  width: 85%;
  background: blue;
}
<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

Simple using floats and box-sizing:border-box

*{box-sizing:border-box;}

#left, #right {
  float: left;
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  width: 85%;
  background: blue;
}
<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

Using table (crossbrowser)

#wrapper {
  display: table;
  width: 100%;
  border-collapse: collapse;
} 

#left, #right {
  display: table-cell;
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  background: blue;
}
<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>