skip to table of contents

Layout in CSS

Using CSS for laying out web pages means we can now use well structured, semantic HTML. The, now obsolete, use of tables for layout meant we could not be well structured or semantic for any non-trivial layout.

CSS layout depends on three properties, position, display and float. Each of these properties is quite complex and requires a lot of study and practice to become proficient.

The Position Property

The CSS neophyte looks at {position: absolute;} and suddenly gets wide-eyed. Wow! he thinks, I can just put stuff where I want it to go. Unfortunately for him, he soon finds out that there are big toothed gotchas. Absolute positioning is easily the least robust of the layout methods. To make matters worse, wysiwyg editors such as DreamWeaver use absolute positioning, giving it way too much credibility.

Positioning With Float

The float property is the most versatile and powerful tool in our box. Like absolute positioning, it is out of the flow. Unlike absolute positioning, other elements do react to floats. The difficult part about learning how to use this property is that you must learn not only what the float does, but also what the surrounding elements, siblings, parent and child, do in response—and why.

Using Display for Layouts

Here is a property that has great promise. I say promise because support is too scant to make really good use of it. Neither of the largest browsers, IE nor Firefox properly support {display: inline-block;} which would allow a block container to act from the outside as if it were inline. Imagine a row of boxes that "word-wrap" as needed. Fortunately, a small group of tweaks, and a small limitation on possibilities makes it possible.

Only modern browsers support the table group of display values. The majority browser (if you infer I mean IE, you would not be wrong) is not modern by any measure.


Opera has been making great headway toward a fully compliant browser, but you have to make allowance for some serious inconsistencies from build to build. The KHTML/Webkit tandem of Konqueror and Safari rendering engines are also becoming highly supportive of CSS2.1. At this time Firefox is the leader in the compliance arena, and Firefox3 should be noticeably better. Now before the Opera fanboys get all excercised, Opera has a habit of making two steps forward and one back, making it a very frustrating browser for the developer.

The best news has to be Microsoft's promise that IE8 will be highly compliant, and will do away with that source of oh, so many bugs, hasLayout.

Table of Contents