Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Two column layout in css

In this example, I will illustrate the basic markup necessary for creating two column layout using css.

We will give a background color of #cdcdcd to our document so we can see the column layout. I have given a thin border of 1px to all the components so its easy to visualize.


Has a width of 660px with margin set to auto which will make it a center aligned with a background color of #fff.

columns :

We will be using the float properties to create the two columns. float:left and float:right with appropriate margins to have enough space between them.

footer :

We need to clear the floats from the footer to place it at the bottom.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”xZqKQw” default_tab=”result” user=”kavitshah8″]See the Pen two column layout by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

You may also like...