Using <div> Tags for Layout

Up until how we have been looking at how to code our HTML and style it using CSS. The final stage is positioning our HTML elements on our web page exactly how we want them.

The traditional way of positioning HTML elements was to place them inside invisible tables. But this was complicated to do and caused web pages to load very slowly. Not only that, but it is now officially the wrong way to do it!

The new, official way to lay out our page elements is using CSS. It can do everything tables can do and much more, and as an added bonus it loads a heck of a lot faster than tables ever did. To people who are used to laying their web pages out using HTML tables it can seem a bit daunting, but in fact it is a much more intuitive way of doing things.

The key to CSS web page layout - the <div> tag

Before we can set about positioning our HTML elements using CSS, we need to define the various different sections of our web page. We do this using <div> tags. The following example gives a typical example of how we might define a web page with a header, a side menu and some content:

<div id="header"> ...header text goes here... </div>
<div id="menu"> links goes in here... </div>
<div id="content"> ...and finally page content in here... </div>

As you can see, we have used <div> tags to define the three areas of our page, and within those divisions we can place anything we want - text, pictures, links etc.

Default <div> layout

As it stands we have simply defined various sections of our HTML, but we haven't begun to adjust the layout yet. divs are block-level elements. This means that they will automatically fill 100% of the available page width, and our sections will line up one beneath the other. On the next page we will begin to write the CSS to position our elements exactly where we want them.