Moving from <table>s to <div>s
The title is actually misleading. I'll be explaining how to ditch tables and move to a more CSS-centered approach of your website.
There is still a large number of webdesigners and webdevelopers that use tables over divs and CSS to design their website. This article is meant as a "getting started" tutorial to help you move from tables to divs.
This is in no way a complete guide to CSS-centered design, and it certainly doesn't explain about all the niceties of CSS-centered design. It's meant to help people move away from tables and start appreciating CSS-centered design.
Using a doctype
The first thing you want is a doctype. More specifically, you'll want a STRICT doctype. Most of the problems people encounter at first when using divs instead of tables arise from using transitional doctypes. Strict doctypes will make sure that all browsers look upon your CSS in more or less the same way - you eliminate a lot of the margin/padding/alignment problems by using STRICT doctypes. Use the following at the very top of your documents.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Yes, you can use 1.1 if you prefer. It's even better, since there is no confusion between strict, transitional or framesets in this XHTML standard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Designing for Divs
Being a good webdesigner doesn't just mean coming up with fancy graphics. Being a good webdesigner also means knowing the limitations of (X)HTML, CSS and keeping those in mind when designing. To make your life easier, here are a few rules of thumb.
- Separate the header from the content from the navigation from the footer from the disclaimer from the sidebar. That doesn't mean your layout has to be columnar or in blocks - it just means that you should see the HTML while designing the page. Know where the different sections of your website will be and layout accordingly;
- Use elaborate CSS where possible to substitute for images;
- Use background images where possible to substitute for elaborate and complex HTML;
Centering your web layout
Instead of using a master table and setting the width to 100% and then fitting the actual table with your design, you can use the following the autocenter your web layout.
Consider the following HTML content.
<body> <div id="wrapper">This div will be perfectly centered.</div> </body>
Pair the HTML content with the CSS below.
body, html
{
margin: auto;
}
#wrapper
{
margin: auto;
}
Setting the margin to "auto" will make sure your browsers autocenters the layout by calculating the left and right margins necessary to center the layout.
The Wrapper
The wrapper div is a container that you set to the width you want your website to have. It's the box that you'll be working in. You can omit this if you want your website to be "fullscreen".
Creating columnar layout
Creating columnar layout is simple. Use float to make certain DIVs align left or right, automatically. Give them a width to work with and you're set. Use clear to clear to reset the alignment.
Consider the following HTML content.
<body>
<div id="wrapper">
<div id="columnleft">This is the left column</div>
<div id="columnright">This is the right column</div>
</div>
</body>
There are several ways to make the left column align left and the right column align right. The method you choose is based on what column you want to have priority. The column you want to have priority should be declared first. The float property you need is the result of this decision. If you want the RIGHT column to have priority, then you first declare the RIGHT column and then set the float property to RIGHT.
<body>
<div id="wrapper">
<div id="columnright" style="float: right;">This is the right column</div>
<div id="columnleft"This is the left column</div>
</div>
</body>
Vice versa, you first declare the LEFT column if you want to do so, then set float to LEFT.
<body>
<div id="wrapper">
<div id="columnleft" style="float: left;">This is the left column</div>
<div id="columnright">This is the right column</div>
</div>
</body>
Problem is: if one of both columns is shorter than the other, the longest column will start to take up to the space left by the shorter column. To avoid this, give the suspected longest column a width. If you want to stop floating divs, use the "clear" property and then either left, right or both.
<body>
<div id="wrapper">
<div id="columnleft" style="float: left;">This is the left column</div>
<div id="columnright">This is the right column</div>
</div>
<div style="clear:both">This will reset to the full width of your wrapper. Ideal for a footer, for example.</div>
</body>
You can also use <br clear="all" /> but that's not the nicest way to clear your floats.
Questions?
Questions? Post them in the comments and I'll answer them. Most of them. At least the ones pertaining to CSS and/or this article.
Leave a Reply