Geek Answers Handbook

How to display dynamic content in two columns evenly?

I have dynamic content uploaded to a page, so there is an undetermined number of elements. I need them to be evenly distributed between the two columns, so I decided to set their width to 50%, and swimming them to the left would do the trick.

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

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

Example: https://jsfiddle.net/fft75mu4/

But in the situation in my example, there is a space above the blue element, because the right element is higher than the first on the left. What is the recommended solution for this? I assume this is a common problem?

I would prefer not to create the actual columns in CSS, as the content is dynamic and the elements can be very tall / short, so a positive word of 5 on the left and 5 on the right does not always work.

+4
source share
4 answers

Depending on the browser support you want, maybe CSS columns are a solution?

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

body {
    column-count: 2;
}

.element {
    break-inside: avoid;
}

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

+3
source

You can do it in different ways, one of them (the left column is the class "floatLeft", the right column is the class "floatRight"):

.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>
Run code
+2
source

javascript. "" (http://masonry.desandro.com/), .

0

Ked's answer is cleaner, but you can also nest div tags. Something like that:

.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>
Run code
-1
source

More articles:


All Articles