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 exam­ple, I will illus­trate the basic markup nec­es­sary for cre­at­ing two col­umn lay­out using css.

We will give a back­ground color of #cdcdcd to our doc­u­ment so we can see the col­umn lay­out. I have given a thin bor­der of 1px to all the com­po­nents so its easy to visualize.

body:

Has a width of 660px with mar­gin set to auto which will make it a cen­ter aligned with a back­ground color of #fff.

columns :

We will be using the float prop­er­ties to cre­ate the two columns. float:left and float:right with appro­pri­ate mar­gins to have enough space between them.

footer :

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

See the Pen two col­umn lay­out by Kavit Shah (@kavitshah8) on Code­Pen.


You may also like...