Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two-column layout without floating elements?

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?

like image 495
devotchkah Avatar asked Feb 20 '13 15:02

devotchkah


People also ask

What is one method of creating a 2 column layout?

A modern way of creating two columns, is to use CSS Flexbox.

How do I apply a two column layout?

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.

What is a two column layout?

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.

How do you divide two columns into flex?

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.


1 Answers

http://jsfiddle.net/9LaJt/

You should take a look at:

display: inline-block

As Mark said, to avoid baseline aligment:

vertical-align: top
like image 115
Raffael Avatar answered Oct 10 '22 11:10

Raffael