Float-based layouts are probably the most common types of layouts on the web. Using floating divs, you can easily create that header, navigation bar, content section and footer that you've envisioned in just a few minutes, all without tables. And oh, by the way, you can also add something to or re-format the layout just as quickly.
Used in combination with the containing block you have perfect control of where your site is shown within the browser's screen. All you need to do is position the container, then float your content within it. It couldn't be much easier.
Used without a containing block, using floating as a positioning strategy makes it quite a bit more difficult to achieve 'the look' you've imagined. The advantage of this is that you will always use the whole screen, no matter how large it is. You need to imagine and plan how a screen that you designed for a screen size of 1024x768 pixels would look if you loaded it on screen with a resolution of 1600x1400 pixels or larger. If you've floated some elements to the right, and others to the left, you may end up with a whole bunch of white space in between your elements. Choosing to design your page this way requires very careful planning and testing on different resolutions to ensure that your design works. So please consider using a containing block.
Let's put together a dummy site using the combination of a container and float positioning. Each element in the following example is using actual CSS positioning, it is not a pre-drawn graphic.
Let's start with the empty 'browser' window:
Next comes the container. We decide we want to center the container in the browser and that it should have a fixed width of 450 pixels, so we create this div:
<div style="width:450px; height:250px; border:1px solid #AAAAAA; margin-right:auto; margin-left:auto; background-color:#FFFFAA">
Now let's add the header and left navigation bar. We define the header div first in the body of our page as a float:left element with a width of 100% of the container, and the left nav bar will also be a float:left with a width and height definition. So the divs will look like:
First, the header div:
<div style="float:left; width:100%; height:30px; background-color:green">
Now the navigation div:
<div style="float:left; width:60px; height:180px; margin-top:4px; background-color:lime">
Finally the footer div:
<div style="float:left; width:100%; height:30px; margin-top:4px; background-color:olive">
When a floated element is inside a container, then "width:100%" means 100% of the container width, not the browser width. In the next lesson, which is about absolute positioning, you'll see that everything is related to positioning within the browser. Afterwards we'll discuss relative positioning, which allows you to leverage the container model once again.