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

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Encountering an 'undefined' error while attempting to showcase predefined JSON data on an HTML webpage

Updating component (`App`) during the rendering of another component is not allowed

html form shifting positions based on screen resolution

Alerts in online software when there is a modification in the database

implementing one active line item at a time in Vue

Creating a JSON hierarchy from an adjacency list

Determine the total number of arrays present in the JSON data

NextJS: Issue: Accessing a client module from a server component is not allowed. The imported name must be passed through instead

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Performing an HTTP request response in JavaScript

What is the most effective way to retrieve the children and ID of an item in the jQuery Nestable plugin following a drag-and-drop action,

The alignment of the table appears off on Internet Explorer, while it is perfectly centered on all other web

Transitioning away from bower in the latest 2.15.1 ember-cli update

The error message "Cannot access the 'id' property of undefined within Angular forms" is indicating that there is

Interacting with JQuery UI Button causes it to shift position on mouseover

Alert message will be displayed upon clicking on stepper titles in Angular 10

Using Sequelize to Include Model Without Specifying Table Name

Is there a way to have my accordion adjust automatically?

Creating a CSS animation to slide a div outside of its container is