How can I position divs side by side without using float? I'm asking because I've read a few times that I shouldn't use float. Or in this particular case is float still the best way to position elements?
A modern way of creating two columns, is to use CSS Flexbox.
On the Layout tab, click Columns, then click the layout you want. To apply columns to only part of your document, with your cursor, select the text that you want to format. On the Layout tab, click Columns, then click More Columns. Click Selected text from the Apply to box.
Two column layouts on the web are very common for basic sites. Generally, they consist of a header, footer and then two columns in the content area. One column is for the main content while the other is a sidebar.
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
http://jsfiddle.net/9LaJt/
You should take a look at:
display: inline-block
As Mark said, to avoid baseline aligment:
vertical-align: top
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With