Absolute positioning: layout test

Back to the article

HTML code

<body>
<div id="header">...</div>
<div id="main">...</div>
<div id="navigation">...</div>
</body>

CSS code

#header, #main, #navigation {
position: absolute;
margin: 0; 
padding: 0;
}

#header {top: 10px; left: 250px;}

#main {top: 100px; left: 250px;}

#navigation {
top: 100px; 
left: 25px; 
width: 175px;
background: #fefefe;
color: #000;
border: 1px solid;
}

Comments

No hacks here. Results are similar in all browsers.

Notes

The problem here was related to the links list in the navigation menu (an unordered list). Internet Explorer 5 adds by default extra padding and margins to the list. So here's the CSS code for the list:

ul {
margin: 0 0 0 1.2em;
padding: 0;
list-style-type: square;
}

li {
margin: 1em 0;
padding: 0;
}