2 columns layout in css (ordering items) - css

Question

Is there any way to show 2 columns layout with this html code using only css? (column1 class should be in first column, and column2 class in the second one)
<div class="container">
<div class="column1">1a</div>
<div class="column2">1b</div>
<div class="column2">2b<br>zz</div>
<div class="column1">2a</div>
<div class="column2">3b</div>
<div class="column2">4b</div>
<div class="column2">5b</div>
<div class="column1">3a</div>
<div class="column1">4a</div>
</div>
The result I expect:
1a 1b
2a 2b
3a zz
4a 3b
4b
5b

Answer 1

float seems the best option here if you manage the Block formatting context
example :
* {
box-sizing: border-box;
}
div div {
box-shadow: inset 0 0 0 1px;/* see me */
width: 50%;
line-height: 1.4em; /* because of that 2 lines element , to hide the gap */
background: lightblue;/* see me too */
}
.column1:first-child {
float: left; /* let another float stand aside */
}
.column2 {
float: right;
clear: right;/* pile us to the far right */
}
div div:nth-child(odd) {
background: lightgreen;/* see me different */
}
<div class="container">
<div class="column1">1a</div>
<div class="column2">1b</div>
<div class="column2">2b<br>zz</div>
<div class="column1">2a</div>
<div class="column2">3b</div>
<div class="column2">4b</div>
<div class="column2">5b</div>
<div class="column1">3a</div>
<div class="column1">4a</div>
</div>
It matches your expected layout here, but will it also with real content ?

Answer 2

One way you can do this would be to float the classes of .column1 and .column2 like this:
.container {
width: 100%;
}
.column1 {
float: left;
width: 50%;
}
.column2 {
float: right;
width: 50%;
}
<div class="container">
<div class="column1">1a</div>
<div class="column2">1a</div>
<div class="column1">2b</div>
<div class="column1">3a</div>
<div class="column2">2b</div>
<div class="column2">3b</div>
<div class="column2">4b</div>
<div class="column1">4a</div>
<div class="column1">5a</div>
</div>
You could also maybe simplify this by having only two inner divs representing each column like:
<div class="container">
<div class="column1">
...
</div>
<div class="column2">
...
</div>
</div>

Answer 3

You can also achieve the same thing using minimal code via using flex. Just add following code to your CSS.
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 50%;
}
Explanation :- You add display type flex to the container, so all the elements will be arranged next to each other inside this div.
Now when you give width of 50% to internal divs and give flex-wrap: wrap to the container, it ensures that only 2 divs are next to each other since there is no space left to accommodate more.
Alternatively if you want the items closer to each other you can reduce the width of the outer container.
.container {
display: flex;
flex-wrap: wrap;
width: 10%;
}
.container div {
width: 50%;
}
This would be closer to what you are expecting.