Using the DIV Tag

If you've been designing Web pages for a while, chances are you've built a page that uses tables to define how the page layout will look. This works fine at first, but six months later, when you're asked to redesign the page (or site) you have to struggle to figure out what the table is doing on the page. And you have to rip it all apart to do your redesign. This can be slow.
If you use the

tag combined with CSS, you will create a page that is easy to manage and manipulate later. Using the

tag allows you to define the page in terms of the logical divisions of the page, not just the locations in the layout (that will certainly change in the future). Most Web pages have fairly standard content chunks, and if you use the

tag to divide them, you'll be ready to style them however you'd like.
Be sure to use semantic markup to style the divisions that have specific semantic meanings with the appropriate tags.
A typical Web page has one or more of the following divisions: header: defining the top banner and possibly navigation of the page - as it's a header, a header tag is appropriate

...

navigation: defining the navigation of the page - this is usually a list, so use a list

...

left sidebar: defining a sidebar on the left

...

right sidebar: defining a sidebar on the right

...

body: defining the main portion of the page

...

footer: defining the footer and possibly sub-navigation of the page

...

Once you've defined the

elements of your page, you can then use CSS to style them however you'd like. Since you're using a tableless layout, you'll need to use CSS positioning to get the divisions to sit where you want them on the page. Luckily this isn't difficult.
Once you've designed your CSS for your divs, you should test your page in several different browsers. That way you can be sure your page will look okay no matter who comes to visit.
View the original article here