In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…

Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:

Bad:

<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div>
<br style='clear:both' />
Text that you need to appear below the previous text blocks

Why is it bad?

  • <br style='clear:both' /> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.
  • <div style='clear:both'></div> is bad because you shouldn’t use empty HTML elements.

Better:

<div class='clearAfter'>
    <div style="float:left;width:300px">left text block</div>
    <div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks

where the clearAfter css class is defined by:

.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1}   /*IE necessary workaround*/

I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/

What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.