Donation?
Yes, it is better than ads and it's optional.
If this site has helped you please consider
remunerating an amount you deem appropriate.
DIV layouts instead of Tables
Why to use DIV tags
Web page layouts are best done where possible using DIV blocks defined by style sheets. Once understood, DIV formatting is easier to use than tables. One reason is because they do not require colspan and rowspan tracking which can be burdensome with frequent editing.
Tables were originally intended for showing tabular data. For example, a list of distances between cities. Browsers intended for use by the blind or other accessibility enhanced browsers can make sense from these tables. However, when tables are used for formatting, it can confuse both, the accessibility enhanced browser and the user.
How to do a DIV layout
Learning to user DIV tags for layouts can be difficult to do. "How to" instructions are sorely missing from the spec.
One strategy for formatting with DIV tags is to float DIV blocks up against eachother and use DIV blocks inside of DIV blocks to get the divisions you want. This strategy is demonstrated in this article.
Caveat: Explorer DIV blocks are too high
You will notice in Internet Explorer that DIV blocks defined with height less that the font size will be automatically enlarged even if there is not text inside the block. This problem which is solved by setting the font-size property to 0 for each DIV. You can see the problem below in IE:Caveat: Explorer DIV blocks are wrong size
Older versions of IE had a problem where the widths of DIV blocks were incorrectly calculated. The error was that the 'width' of a block included the padding and the border of the block. The CSS spec says that this should not be the case. IE fixes this under more recent document type presentations. Or put another way, this error will NOT occur if you specify a valid !DOCTYPE at the top of your document (and in the case xhtml, a valid namespace). Examples:-
The document type is HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> -
The document type is HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -
The document type is xhtml 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> -
The document type is XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
This strategy for using DIV tags to layout your page is very simple and can be altered a few different ways. I tend to use "float" because I feel assured blocks are being flushed up against eachother. In the examples that follow, I will show examples inside a "mini" web page that will have a double border. Like so:
<div style="height: 100px; width: 600px; border: 3px double red;">
This be the mini web-page. Lets put a DIV block in it...
<div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>There is the DIV block...lets add another:
<div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'><div style='height: 10px; width: 10px; border: 1px solid black; font-size: 0pt;'>Let's float them side-by-side using 'float: right'
<div style='height: 10px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'><div style='height: 10px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'>Now let's embed blocks in eachother and get interesting
<div style='height: 20px; width: 10px; border: 1px solid black; float: left; font-size: 0pt;'>
</div>
<div style='height: 20px; width: 20px; border: 1px solid black; float: left; font-size: 0pt;'>
<div style='height: 8px; width: 18px; border: 1px solid blue; float: left; font-size: 0pt;'>
</div>
<div style='height: 8px; width: 8px; border: 1px solid yellow; float: left; font-size: 0pt;'>
<div style='height: 6px; width: 2px; border: 1px solid green; float: left; font-size: 0pt;'>
</div>
<div style='height: 6px; width: 2px; border: 1px solid green; float: left; font-size: 0pt;'>
</div>
</div>
<div style='height: 8px; width: 8px; border: 1px solid blue; float: left; font-size: 0pt;'>
</div>
</div>
And that is all there is to DIV layouts if you follow these rules:
- Your web page is a rectangle with 4 straight sides
- DIV block making up your layout must not have any empty space between them anywhere on the web page
- Create smaller divisions and "even things up" but putting smaller blocks inside larger enclosing blocks
See the example below. Notice the jagged boxes in the center area. These are all in an enclosing block that allows for the lining up of the page sans empty spaces. View the source code too see this. When you view the source search for the phrase "LOOK HERE" to jump right down to it.
If so, why not provide a link to it? Just copy the following to your web page:
<a href='http://upwithabang.com/articles/css-divs-instead-of-tables.html'>
DIV Layouts
</a>
Share this: