CODEWITHSUNDEEP
htmlcsscss-float
jpsnow72
jpsnow72

Reputation: 995

CSS floating 2 column layout with multiple elements

I want to create a simple two-column layout using four divs. I am restricted and cannot modify the HTML structure. I only can modify the CSS.

I want the second div in the right column to fall directly below the previous right column div. Right now, it pushes to the top of the second left div.

Right now this is what I have in HTML: 

<div id="parent">
    <div class="left">
        Left 1
    </div>
    <div class="right">
        Right 1
    </div>
    <div class="left">
        Left 2
    </div>
    <div class="right">
        Right 2
    </div>
</div>

CSS:

.left {
  height: 400px;
  width: 60%;
  float: left;
  background-color: red;
  display: block;
}
.right {

  width: 30%;
  float: right;
  background-color: green;
   display: block;
}

See my fiddle: http://jsfiddle.net/Lun61g7a/2/

Upvotes: 0

Views: 1824

Answers (1)

Gerard
Gerard

Reputation: 15786

Use a flexbox and allow the elements to move to the next "row" when needed

#parent {
  display: flex;
  flex-wrap: wrap;
}

.left {
  height: 400px;
  width: 60%;
  background-color: red;
  display: block;
}

.right {
  width: 30%;
  background-color: green;
  display: block;
}
<div id="parent">
  <div class="left">
    Left 1
  </div>
  <div class="right">
    Right 1
  </div>
  <div class="left">
    Left 2
  </div>
  <div class="right">
    Right 2
  </div>
</div>

Upvotes: 1

Related Questions