Simple 2 column CSS layout

This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a three column layout, read on as this tutorial explains a basic concept that can be used to create as many columns as you need. When youre done, take a look at ow to create a !"column layout with CSS.

The layout consists of a header, a hori#ontal na$i%ation bar, a main content column, a sidebar, and a footer. It is also hori#ontally centered in the browser window. & pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the ine$itable Internet 'xplorer bu%s.

To see the full CSS used for each step, $iew source on the example documents. (. )asic structure

*irst of all, we create the basic T+, structure-

.di$ id/0wrap01 .di$ id/0header01.2di$1 .di$ id/0na$01.2di$1 .di$ id/0main01.2di$1 .di$ id/0sidebar01.2di$1 .di$ id/0footer01.2di$1 .2di$1

&fter that, we put some content in the different sections-

.di$ id/0wrap01

.di$ id/0header01.h(13ocument .di$ id/0na$01 .ul1 .li1.a href/04015ption (.2a1.2li1 .li1.a href/04015ption 2.2a1.2li1 ... .2ul1 .2di$1 .di$ id/0main01 .h21Column (.2h21

eadin%.2h(1.2di$1

.p1,orem ipsum dolor sit amet, consectetuer adipiscin% elit....2p1 .2di$1 .di$ id/0sidebar01 .h21Column 2.2h21 .p1,orem ipsum dolor sit amet, consectetuer adipiscin% elit....2p1 .ul1 .li1.a href/0401,ink (.2a1.2li1 .li1.a href/0401,ink 2.2a1.2li1 ... .2ul1 .2di$1 .di$ id/0footer01 .p1*ooter.2p1 .2di$1 .2di$1

6ow we ha$e a completely unstyled T+, document which is structured in a way that lets us use CSS to control its layout.

7iew step (. 2. &d8ust the body and html elements

To make the content reach the ed%es of the browser window, we set the mar%in and paddin% of the body and html elements to #ero. We also specify colours for text and back%round.

body, html 9 mar%in-:; paddin%-:; color-4:::; back%round-4a<a:=a; >

7iew step 2. !. 5n to the main containers

&fter that its time to %i$e the content area a width and center it hori#ontally. We do that by specifyin% the width and mar%ins of the main container, 4wrap. We also %i$e it a back%round colour to make it show up on the pa%e.

The method we use to center the content is based on the fact that when an elements left and ri%ht mar%ins are set to auto, they will share whate$er is left when the elements width has been subtracted from that of its container. In this case the width of 4wrap will be subtracted from the width of the browser window.

6ote- for this method to work in Internet 'xplorer ?$ersion @ and later onlyA, the document must use a 35CTBC' that forces I' to use its standards mode. Clease read *ix Bour Site With the Di%ht 35CTBC'E for more info.

4wrap 9 width-<F:px; mar%in-: auto; back%round-4==c; >

In case youre wonderin% why were not usin% the body element to control the width and centerin% of the layout, it is because doin% so can cause unwanted side"effects in some $ersions of Internet 'xplorer.

&fter that, we %i$e the different sections of the document different back%round colours to make them show up.

4header 9 back%round-4ddd; > 4na$ 9 back%round-4c==; > 4main 9 back%round-4=c=; > 4sidebar 9

back%round-4c=c; > 4footer 9 back%round-4cc=; >

7iew step !. G. Clace the columns side by side

To make the two columns ?4main and 4sidebarA display side by side we float them, one to the left and the other to the ri%ht. We also specify the widths of the columns.

4main 9 float-left; width-F::px; back%round-4=c=; > 4sidebar 9 float-ri%ht; width-2F:px; back%round-4c=c; >

6ote that the sum of the widths should be eHual to the width %i$en to 4wrap in Step !.

This will make 4sidebar appear to the ri%ht of 4main, but the footer is not where it should be.

7iew step G. F. Cush the footer down

The footer doesnt %et pushed down to the bottom of the content because of the way float works. When you float an element, it is remo$ed from the document flow and doesnt push elements that follow it down. In this case 4footer will start ri%ht below 4sidebar.

To a$oid this we use the clear property to tell the footer that it cant ha$e any elements next to it.

4footer 9 clear-both; back%round-4cc=; >

7iew step F. @. *ix the back%round colour

6ow we can see that the shorter column doesnt continue all the way down to the footer. To make it look like it does, we use the same back%round colour for 4sidebar and 4wrap.

4sidebar 9 float-ri%ht; width-2F:px; back%round-4==c; >

&lso, if you take a look at this step in Internet 'xplorer @ you may notice that the back%round colour of the footer is pushin% up beside the main content. That will be taken care of later.

7iew step @.

If you donIt know which column is %oin% to be the tallest, and you want both columns to ha$e different back%rounds and look like they are %oin% all the way to the bottom, you need to use a workaround. There are se$eral ways to achie$e that effect-

*aux Columns Creatin% ,iHuid ,ayouts with 6e%ati$e +ar%ins In search of the 5ne True ,ayout

<. +ake the na$i%ation bar hori#ontal

4na$ contains a re%ular unordered list of links. Since we dont want it to look like an unordered list we restyle it.

4na$ ul 9 mar%in-:; paddin%-:; list"style-none; > 4na$ li 9 display-inline; mar%in-:;

paddin%-:; >

7iew step <. J. &d8ust mar%ins and paddin%s, and make I' @ cooperate

&lmost done. Time to ad8ust the mar%in and paddin% of some elements to make the layout a little less cramped.

4header 9 paddin%-Fpx (:px; back%round-4ddd; > h( 9 mar%in-:; > 4na$ 9 paddin%-Fpx (:px; back%round-4c==; > 4main 9 float-left; width-GJ:px; paddin%-(:px; back%round-4=c=; > h2 9

mar%in-: : (em; > 4sidebar 9 float-ri%ht; width-2!:px; paddin%-(:px; back%round-4==c; > 4footer 9 clear-both; paddin%-Fpx (:px; back%round-4cc=; > 4footer p 9 mar%in-:; >