CSS floating 2 column layout with multiple elements

Question

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/

I looked closer and can actually modify the parent's CSS, but i can't create separate divs for each column unfortunately. Ill modify my question to reflect this. — jpsnow72
– jpsnow72, Commented Oct 18, 2018 at 12:55
So I am stuck with a single parent encapsulating this all and can really only modify the CSS, not the HTML — jpsnow72
– jpsnow72, Commented Oct 18, 2018 at 12:57

Gerard · Accepted Answer · 2018-10-18 13:06:20Z

1

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>

answered Oct 18, 2018 at 13:06

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jpsnow72 Over a year ago

This looks closer, but I actually want the first right div to end at the end of the content and the 2nd right div to begin right below it. It is still pushing the 2nd right div all the way down

Collectives™ on Stack Overflow

CSS floating 2 column layout with multiple elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related