I have dynamic content loaded on a page, so an unspecified number of elements. I need these to be evenly spaced between two columns, so I figured setting their width to 50% and floating them left would do the trick.

<div class="element">
    <p>My content goes here!</p>
</div>

.element{float:left;width:50%;}

An example: /

But in the situation in my example there's a gap above the blue element because the right element is taller than the first left. What's the remended solution for this? I'm assuming it's a mon issue?

I'd rather not create actual columns in CSS, as the content is dynamic and elements can be very tall/short, so putting say 5 on the left and 5 on the right doesn't always work.

I have dynamic content loaded on a page, so an unspecified number of elements. I need these to be evenly spaced between two columns, so I figured setting their width to 50% and floating them left would do the trick.

<div class="element">
    <p>My content goes here!</p>
</div>

.element{float:left;width:50%;}

An example: https://jsfiddle/fft75mu4/

But in the situation in my example there's a gap above the blue element because the right element is taller than the first left. What's the remended solution for this? I'm assuming it's a mon issue?

I'd rather not create actual columns in CSS, as the content is dynamic and elements can be very tall/short, so putting say 5 on the left and 5 on the right doesn't always work.

• javascript
• jquery
• html
• css
• multiple-columns

Share Improve this question Follow asked Apr 13, 2015 at 19:30 user3420034user3420034 1

• Is it posible with css3 property named column-count. Take a look at this : w3bits./css-masonry and caniuse./#feat=multicolumn – Tiberiu C. Commented Apr 13, 2015 at 20:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Depending on browser support you wish, maybe CSS columns is a solution?

http://caniuse./#feat=multicolumn

body {
    column-count: 2;
}

.element {
    break-inside: avoid;
}

https://jsfiddle/erykpiast/fft75mu4/11/

You can make this done by different ways, one of them (left column - "floatLeft" class, right column - "floatRight" class):

.element{width:50%;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}
.blue{background-color:#3aa9e3}
.red{background-color:#f15743;}
.green{background-color:#8aba56;}

<div class="element red floatLeft">
    <p>My content goes here! My content goes here! My content goes here! My content goes here!</p>
</div>

<div class="element green floatRight">
    <p>My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here!</p>
</div>
<div class="element blue floatLeft">
    <p>My content goes here! My content goes here! My content goes here! My content goes here!</p>
</div>

You need to use javascript. There is a lightweight library called masonry (http://masonry.desandro./) that will help you achieve what you want.

Ked Answer is more clean, but you could also nest the div tags. Something like this:

.element{width:50%;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

.blue{background-color:#3aa9e3}
.red{background-color:#f15743;}
.green{background-color:#8aba56;}

.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}

<div class="element floatLeft">
    <div class="red floatLeft"> 
        <p >My content goes here! My content goes here! My content goes here! My content goes here!</p>
    </div>
    <div class="blue floatRight">
        <p>My content goes here! My content goes here! My content goes here! My content goes here!</p>
    </div>
</div>

<div class="element green floatRight">
    <p>My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here!</p>
</div>