Splitting the div into two columns

Question

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly.

Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg

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:

//splitting the div into 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;
}

//styling for angular2 components
#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;
}

My Desired Layout: (the cards will only be in the red square.)

https://i.stack.imgur.com/mI7Mn.jpg

Questions:

How can I resolve this issue and why does it work fine when I replace the Angular2 components with simple HTML text?

Can I simplify this code without impacting 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>

Thank you!

javascript css angular

Answer 1

Answer №1

Easy Way to Style with 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>

Simplified Layout using floats and box-sizing

_{You may also consider adding a .clearfix class to the parent element for this approach}

*{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>

Clean Layout using display:table (cross-browser compatible)

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

Answer 2

Easy Way to Style with 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>

Simplified Layout using floats and box-sizing

_{You may also consider adding a .clearfix class to the parent element for this approach}

*{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>

Clean Layout using display:table (cross-browser compatible)

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

Answer 3

Answer №2

Have you experimented with using float:left for child nodes and clear:both, content: '' for the parent node?

What I'm suggesting is that you may be missing a float:left declaration for the #products-container

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

If you need more information on the clearfix class, you can find it in Bootstrap here.

Answer 4

Have you experimented with using float:left for child nodes and clear:both, content: '' for the parent node?

What I'm suggesting is that you may be missing a float:left declaration for the #products-container

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

If you need more information on the clearfix class, you can find it in Bootstrap here.

Splitting the div into two columns

Answer №1

Easy Way to Style with flexbox

Simplified Layout using floats and box-sizing

Clean Layout using display:table (cross-browser compatible)

Answer №2

Similar questions

Expanding image size with CSS

Using AngularJs, you can access the document.body.onfocus event within the controller of

What is the best way to bind a click handler or any event handler to my object or module?

Is there a jQuery function that can produce repeated output and append content with each successive click?

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Add two columns for mobile devices in the Woocommerce platform

Tips for positioning slideshow below header in web design

Tips for turning on a gaming controller before using it

Typography Addition on Flexslider

Creating dynamic templates for table rows in AngularJS directives

I'm curious to know why my jQuery function fadeOut is functioning properly while slice isn't working as expected

Adding data from one object to another in Javascript results in duplicated entries

Loading an Ionic module lazily within a children array is a smart way to

Making an Axios request with parameters

Using GSAP to create a staggered animation with a negative delay

Importing an object into Three.js from Blender using JSON_KEYBOARD_SHORTCUT

What is Flask's approach to managing JSON data?

difficulty associated with using a package I uploaded to npm

Guide on implementing asyncWithLDProvider from Launch Darkly in your Next.js application

Retrieve an element from an array using the POST method