Odtnhj

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:

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.)

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!

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

_{You might want to use also a .clearfix class here on the parent element}

*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 display:table (cross-browser)

#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>

Have you tried float:left for children node and clear:both, content: '' for the parent node?

What I mean is that you miss a float:left for the #products-container

<div class="container clearfix"> 
 <div id="categoriesContainer" style="float:left" ></div>
 <div id="products-container" style="float:left" ></div>
</div>

About the clearfix class, you can refer to Bootstrap here.