CSS Flexbox is great for mobile screens and responsive content for dynamic layouts and webapps. With Flex-box, we can easily achieve the 2 column layout. And no more float
and clearfix
hacks.
Don't know what Flexbox is? Look here.
I am going to show you a few ways to do it. Feel free to leave comments below if you have a different solution. Here we go:
HTML
<div class="parent">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Base CSS:
.parent {
display: flex;
align-items: center;
}
Method 1:
Left
Right
.left {
margin-right: auto;
}
Method 2:
Left
Right
.left {
flex-grow: 1;
}
Method 3:
Left
Right
.right {
margin-left: auto;
}
Method 4:
Left
Right
.parent {
justify-content: space-between;
}
2 Equal Width Columns
Left
Right
.parent > div {
flex: 1;
}