Div's in Two Columns

Split Div Into 2 Columns Using CSS

When you float those two divs, the content div collapses to zero height. Just add

<br style="clear:both;"/>

after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

Splitting divs into 2 columns

Nothing wrong with flexbox for this layout.

There's no need to use a pseudo-element.

.article-container {  display: flex;  flex-wrap: wrap;}
.article {  flex: 0 0 50%;  padding: 10px;}
* {  margin: 0;  box-sizing: border-box;}

<div class="article-container">  <div class="article">    <h3>title1</h3>    <p>article1</p>  </div>  <div class="article">    <h3>title2</h3>    <p>article2</p>  </div>  <div class="article">    <h3>title3</h3>    <p>article3</p>  </div>  <div class="article">    <h3>title4</h3>    <p>article4</p>  </div></div>

div under div in two-column layout

use clear:both; as shown below

#adSpace {
    float: right;
    clear: both;
}

Two columns divs, ordered vertically

In that case we can use CSS3 transformation to achieve needed behaviour.

.container {    width: 300px;    height: 300px;    border: 1px dotted black;    padding:0;    transform: rotate(270deg);}
.card {  margin:0;  padding:0;  width: 50px;  height: 50px;  float: right;  border: 1px solid black;  display: inline-block;  box-sizing:border-box;  transform: rotate(90deg)}

<div class="container">  <div class="card">1</div>  <div class="card">2</div>  <div class="card">3</div>  <div class="card">4</div>  <div class="card">5</div>  <div class="card">6</div>  <div class="card">7</div>  <div class="card">8</div>  <div class="card">9</div>  <div class="card">10</div></div>

How to change the order of three divs in two columns?

As your widths are defined in the CSS,

maybe not using flex system is easier here:

.main {  width: 400px;}
.box {  position: relative;  width: 50%;}
.box > * {  box-sizing: border-box;  border: 1px solid red;  width: 70%;}
.box>div:nth-child(2) {  position: absolute;  top: 0;  right: 0;  width: 30%;}

<div class="main">  <div class="box">    <div>One</div>    <div>Two      <p>paragraph</p>    </div>    <div>Three</div>  </div></div>

One div on the left side and two divs on the right side

Update

To make the #boxOne wider, we should look at the grid parent, which we are saying is 3 columns wide, with each column representing 120px.

Now let's look at #boxOne for a second, and catch/fix an error I introduced.

#boxOne {
  grid-column: 1; /* Oops—this is wrong */
  grid-row: 1 / 3;
}

We declared the grid to be 3 columns, yet #boxOne is only spanning a single column. The other boxes are also spanning a single column. Here's what our grid looks like now.

You can see that we're not even using that third column. Let's adjust #boxOne to span twice as wide as the other boxes. One really important detail is to count from the first vertical line. Think of the column like this:

Now it should be clear what we need to do.

#boxOne {
  grid-column: 1 / 3;
  …
}

The other boxes we'll place at the span place where #boxOne left off.

#boxTwo {
  grid-column: 3;
  …
}

#boxThree {
  grid-column: 3;
  …
}

Now things are looking the way we want.

---

I would approach this using CSS Grid. In your example, the images would implicitly take up the necessary space, and you wouldn't need to use px values in the line declaring grid-template-columns. In your case, you could replace 120px with 1fr which is a fractional unit utilized by CSS Grid.

Another advantage of using CSS Grid is that you can avoid a lot of additional width and height settings, as well as using margins for the gaps between items.

#showroom {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 1rem;
}

#boxOne {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

#boxTwo {
  grid-column: 3;
  grid-row: 1 / 2;
}

#boxThree {
  grid-column: 3;
  grid-row: 2 / 3;
}

#showroom > * {
  background-color: #444;
  padding: 20px;
  border-radius: 5px;
}

<div id="showroom">
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
  <div id="boxThree"></div>
</div>

Two columns divs inside a div container

I would like to set the 2-columns divs with the same height than
container

Since your container have height:100%, I assume you want the same for your child div's

• Give 100% height to your html and body

  html,body{
   height:100%
  } 
  

• You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.

  #right-column {
  float: left;
  width: 30%;
  background-color: blue;
  display: block;
  height:inherit;
  }
  
  #left-column {
  float: left;
  background-color: red;
  border: 1px;
  width: 70%;
  height:inherit;
  }
  

Here's the fiddle

Cheers!

---

Related Topics