CODEWITHSUNDEEP
javascriptjqueryhtmlcssmultiple-columns
user3420034
user3420034

Reputation:

How to display dynamic content in two columns evenly?

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.net/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 recommended solution for this? I'm assuming it's a common 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.

Upvotes: 4

Views: 4111

Answers (4)

Daniel Urdaneta
Daniel Urdaneta

Reputation: 37

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>

Upvotes: -1

Eryk Napierała
Eryk Napierała

Reputation: 506

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

http://caniuse.com/#feat=multicolumn

body {
    column-count: 2;
}

.element {
    break-inside: avoid;
}

https://jsfiddle.net/erykpiast/fft75mu4/11/

Upvotes: 6

Tatermelon
Tatermelon

Reputation: 479

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

Upvotes: -1

Ked
Ked

Reputation: 134

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>

Upvotes: 1

Related Questions