2007-05-13

CSS - Two Column Layout + Header, Footer

No frills, and no guff. Here is.

Html



<div id="PageWrapper">
 <div id="Header">...</div>
 <div id="Navigation">...</div>
 <div id="Content">...</div>
 <div id="Footer">...</div>
</div>


CSS



#PageWrapper
{
 width:980px;
 margin:0 auto 0 auto;
}

#Header
{
 margin:0;
 text-align:left;
}

#Navigation
{
 float:left;
 width:185px;
 padding:0;
 margin:0;
}

#Content
{
 padding-top:0px;
 margin:0 0 0 200px;
 width:700px;
}

#Footer
{
 clear:both;
 text-align:left;
 margin:0;
}

Here's what you need to know!

• If you want a wider menu, you have to increase the left margin on #Content and the width #Navigation
• If you want to change the page width change the #PageWrapper.
• #PageWrapper's auto margin's center the page nicely. Change if you'd like.

No comments: