Click here to Skip to main content
Click here to Skip to main content
Go to top

Basic, Reusable, CSS Layout

, 15 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Covers the common problems with CSS-based layouts and provides my favorite workarounds.

[Note: It has been brought to my attention that this solution does not work properly with Opera, Safari, and a handful of other low-profile browsers. Most likely, the only portion of it that does not work correctly is the modified box-model (the IE vs Everyone Else section). You can work around this by rendering the site in standards mode, and telling IE that it should do the same.

Personally, I haven't ever had to take anything other than IE and Firefox into account on my projects. All of my clients have been of the opinion that the 2-4% of web users who were not using Firefox or IE weren't in their target demographic, and that even if they were, they probably had access to Firefox or IE, and could suffer the hassle of viewing the site through those browsers. (I can hear the lynch mob coming with their pitchforks and torches.)

If you modify this code to work in any of those browsers, let me know, and I'll post your modifications and give you the credit you deserve for trudging through that tedious work.]

Introduction

I often find myself performing the same layout code for various projects. Nearly always, I am trying to use DIVs rendered using CSS to achieve a site layout that looks something like this:

baselayout.gif

Making this layout work in both IE and Firefox is nontrivial, and nearly always headache inducing. In this article, I provide a basic layout that can be tweaked to work for just about any project.

The layout involves several common elements: a header, two full-length columns, and a footer. Getting this layout to work correctly involves working around several frustrating problems.

The Basic Divs

The first thing to do is actually create the HTML that we will be manipulating via CSS. The basic HTML looks like this:

<div id="Wrapper">
    <div id="Header"></div>
    <div id="Column"></div>
    <div id="Content"></div>
</div>
<div id="Footer"></div>

IE vs Everyone Else

Next, we have the problem of IE rendering everything differently than everyone else. To solve this, we include the following definition in our CSS sheet:

Div
{
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}

This essentially tells Firefox to render <div>s in the same way that IE does, which is non-standard, but more intuitive to me.

Min-Height of 100%

OK. Now the site's rendering the way I expect it to. Next, we want the main content of the site to render at 100% height or greater. To do this, we add the following element to our CSS:

#Wrapper 
{
display: table;
border: solid 3px #4160D5;
margin: auto;
width: 800px;
height: 100%;
padding-bottom: 47px;
}

The items to note here are the display:table and the height:100%. The display:table item tells Firefox to render the #Wrapper element as if it is rendering a table, which means that it will expand to fit its children. The height:100% specifies that the #Wrapper element will be at least the full height of the browser window.

Same-Height Columns

Moving right along. It turns out that getting columns to render at the same height is a real pain using only DIVs and CSS. There is a solution known as pseudo columns, which involves simulating a column using a tiling background image. I don't like that solution. So, after Googling for a while, I came across a much more agreeable solution.

What we do, is make our columns huge, and tell their containing element to hide excessive, unused column space. This requires several modifications to our CSS. First, we add the following to our CSS column items:

padding-bottom: 32767px;
margin-bottom: -32767px;

What this does is push the bottom of the column way down using padding, then bring it right back up again using a negative margin. Basically, this creates a large column that has lots of unused space - space that the browser knows is unused. So now, we add the following to our CSS:

html>body #Wrapper {overflow:hidden;}

This basically tells Firefox that the container (#Wrapper) is to hide any unused space in its children. For some reason, IE7 doesn't work correctly if you specify overflow:hidden on the container, so we add this line specifically for Firefox.

That Dern Footer

Finally, we want our footer to hang out at the bottom of the page. We do that with the following CSS definition:

#Footer
{
margin: auto;
background: #D66C43;
margin-top: -50px;
height: 50px;
width: 800px;
border: solid 3px #4160D5;
border-top: 0;
color: #FFF;
}

You'll note that its margin-top is set to the negative value of its height. Without this, the footer would sink beneath the bottom of the screen. This pulls it back up to its appropriate position. We also want the footer to be the same width as our primary wrapper element, and to have auto margins so that Firefox centers it.

It should also be noted that the footer will now be crammed up into the main content of our page. We don't want this, so we add padding to the bottom of our wrapper (if you scroll back up to the wrapper CSS code, you'll notice it is already there).

Whew!

Well, that's that. You can download the source to get the complete picture and start manipulating it to look the way you want. I tested this in the latest version of Firefox and IE7. It's currently being used in my blog. Special thanks goes out to alistapart, a continually useful site. I'm sure they would hate my solution, but that's beside the point. Also, I'd like to thank the guy who wrote this article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

christophilus
Software Developer
United States United States
I'm a professional geek.

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermnburch22-Feb-12 4:21 
QuestionFF9 - missing footer PinmemberMember 423686521-Feb-12 12:43 
AnswerRe: FF9 - missing footer PinmemberMember 82957877-Apr-12 4:38 
QuestionMessage Automatically Removed Pingroupghjtyktyk15-Feb-12 15:55 
GeneralMuch better option PinmemberGiorgito17-May-06 23:56 
Well, after going through the article and the pros and cons and reading all posts here I have to say that hacks are never good because eventually your web site will be a mess mainly because of broswer updates and we all know that it happens.
 
I just wanted to share with all of you the following web site http://www.csszengarden.com/
 
It works for me. Smile | :)
 
Let me know what you all think.
GeneralRe: Much better option Pinmemberchristophilus19-May-06 7:49 
GeneralDO NOT USE THIS MODEL PinmemberEdelman17-May-06 12:00 
GeneralRe: DO NOT USE THIS MODEL Pinmemberchristophilus17-May-06 12:13 
GeneralRe: DO NOT USE THIS MODEL PinmemberEdelman17-May-06 13:32 
GeneralCSS Layout Holy Grail PinmemberP.J. Tezza16-May-06 6:39 
GeneralRe: CSS Layout Holy Grail Pinmemberchristophilus16-May-06 19:30 
GeneralRe: CSS Layout Holy Grail Pinmemberchristophilus16-May-06 19:33 
GeneralRe: CSS Layout Holy Grail PinmemberP.J. Tezza16-May-06 20:09 
GeneralRe: CSS Layout Holy Grail Pinmemberchristophilus17-May-06 5:29 
GeneralRe: CSS Layout Holy Grail PinmemberP.J. Tezza17-May-06 6:06 
GeneralRe: CSS Layout Holy Grail Pinmemberchristophilus17-May-06 8:04 
GeneralRe: CSS Layout Holy Grail PinmemberP.J. Tezza17-May-06 8:27 
GeneralRe: CSS Layout Holy Grail Pinmemberchristophilus17-May-06 11:07 
GeneralDoes not work with Opera Pinmembersulfrian15-May-06 23:28 
GeneralRe: Does not work with Opera Pinmemberchristophilus16-May-06 19:21 
GeneralRe: Does not work with Opera PinmemberEdelman17-May-06 13:36 
GeneralThanks for the Kickstart PinmemberAlyque15-May-06 8:20 
GeneralNice work Fella PinmemberRichardGrimmer15-May-06 4:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 15 Feb 2012
Article Copyright 2006 by christophilus
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid