It's not just the end result that I aim for, I aim probably more at showing the thought process of how to build your design without tearing out the last few hairs you've left :) No IE Yes, that's the start: ditch the browser of choice of the majority of your users. It's critical to do this is you value your sanity. Chose any other browser: FF, Safari, Opera, ... I'll use Firefox for it has plug-ins like the web developer toolbar and firebug. But the others will work too as long as it's not "that" browser from Microsoft. Start I'm using a template for the html to start from. I usually start from this in these guides:
A step-by-step example of how to build your design.
Make it as strict as you can cause it will increase the number of errors you get from a code validation and make your code a lot better as a result.
It's not just the end result that I aim for, I aim probably more at showing the thought process of how to build your design without tearing out the last few hairs you've left :)
Yes, that's the start: ditch the browser of choice of the majority of your users. It's critical to do this is you value your sanity.
Chose any other browser: FF, Safari, Opera, ... I'll use Firefox for it has plug-ins like the web developer toolbar and firebug. But the others will work too as long as it's not "that" browser from Microsoft.
I'm using a template for the html to start from.
I usually start from this in these guides:
The main thing I'd do different in a real life case is that I'd make the CSS a <link>. But for simpler cutting and pasting in this tutorial this will do.
Yes: make the html first.
Now does that validate ?
Yep it does!
Does it make sense without CSS ?
I'll consider the HTML finished now. All the rest will have to be done in the CSS.
The 100% height framework
First let's center our body and give it a different color from the background
Why does this center it ?
Well the block element <body> is given a width and told to calculate it's left and right margin itself.
Next let's stretch it vertically to be at least the height of the viewport
The 100% height trick is all about: the 100% references the height of the direct parent, provided the parent has an explicitly set height different from "auto".
The exception is the root element that has the height of the viewport.
min-height instead of height is what makes it at least as high as the content (and not cut our body off where the viewport stopped).
Try it with different sizes of viewport and different sized content a bit.
Now what would happen if we were to add a border or padding or vertical margins to <body> ? Try it !
So remember we need to avoid adding anything that's going to add to the height of the body. The 100% sets the height of the content, not the overall height.
So we'll need to add the border in a different fashion then.
Stick the footer to the bottom
By stick to the bottom in this case I meant stick it under the content if the content is longer than the viewport, and stick it at the bottom if the content isn't long enough to fill the viewport.
You can also stick it always at the bottom of the viewport: you use position fixed instead of position: absolute in that case.
Nice, but the footer is lacking the width it needs.
I'm sure after the talk about 100% height most would wonder about 100% width:
There are ways to deal with that (and we'll show them where we deal with IE6 much later).
The reason the width get's too large is cause we derive the overall width from the width of the content (which we can set), and then the padding is added around that.
But when we use absolute positioning, setting the overall with is more than easy enough:
Yes, we set left and right and the width will adapt to what's needed.
We can now set the padding as we like. Try it!
Layout the header
I need to fix the header (mostly cause my test image is way too large), but also to show some neat tricks.
Let's remove that ugly blue border:
This will remove borders on all images that are inside a link.
Let's also position and size the header:
You can lay it out as you like, it's just one way, nothing more.
Fix the overlap
If your content is larger than the viewport, the footer is sitting on top of the content itself. This needs fixing.
But the footer is absolutely positioned so it has no influence over the in-flow elements.
The solution is to make sure the content has whitespace that sticks out below the footer:
Now why does this work?
The middle div isn't stretched ?
Nope but it's got a padding sticking out beyond it's content that leaves room for the footer to overlap should it want to do that.
To visually see it at work: add a background color on .middle and resize your browser window.
Adding some padding
Where to add padding is tricky:
So what works ?
I've collapsed the 2em bottom padding into the shorthand padding on the .middle
The .footer p can have padding, its width isn't set.
I already took care of the header above.
Adding a border
A border is just as tricky as the padding above, but we can add left and right borders on the body and we can add a top border on the header and a bottom border on the footer:
Removing the background colors showing us where the elements are and putting it all together we end up with:
Let's test it first in the other standards compliant browsers:
Seems to work fine in FF, Opera, Safari and Chrome.
So this is another milestone like the one where we declared the html done. TheCSS is now done.
I can hear you think: but you didn't even test it in IE ! How can it be done ?
Yes it's done. We'll add conditional comments to work around issues that IE has.
The reason for not adding anything back into the main CSS is to keep it all simple and possible to wrap our head around. And mainly not to have to care why IE does what it does.
Work around IE bugs
To work around the bugs in IE we need to test it first. Easiest is IE8 in most cases, most difficult is IE6 in virtually all cases.
IE8: does OK as expected
IE7: does OK as well (I had hoped to have something to fix to be honest)
IE6: there's no chance it'll do it properly
IE6 doesn't understand min-height, but its height is broken enough to be able to be a good substitute.
And the setting of both sides on the footer isn't working either (expected)
Adding the conditional comment to fix it:
Edit: spelling, grammar and layout[/edit]
[edited by: swa66 at 12:13 pm (utc) on Nov. 11, 2009]