Like many website designers I’ve learned a lot about how to use the float property in CSS. Also like many website designers I’ve had to suffer the frustrations of glitches across different browsers (particularly Internet Explorer) and unexpected results in my design. I’ve made a specific effort to eliminate reliance on floats as much as possible.
The float property certainly has its place, but I wanted to concentrate on developing CSS layout based on absolute, relative and fixed positioning. It’s flexible and often more cross browser friendly.
Absolute Positioning
Absolute positioning allows more comprehensive control over where page elements are positioned. It also allows flexibility to rearrange a page layout in appearance terms without altering the HTML structure of a document (although I prefer my HTML to follow the logical structure of the page and be reflected in the design).
Absolutely positioned elements in a website are positioned in respect to the nearest containing block that is itself subject to position : absolute or position : relative. This defaults to the HTML element, but basically whenever you specify the BODY element or a DIV as positioned then you can use absolute positioning on elements within it.
We have a very simple HTML layout.
<html>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
The following CSS would position the P element in the top left of the screen.
p
{
position: absolute;
top: 0px;
right: 0px;
}
If we positioned the containing DIV as well, however, the positioning of the P element would be based on that DIV because it is inside it.
div
{
position: absolute (or relative);
top: 0px;
left: 0px;
width: 100px;
}
p
{
position: absolute;
top: 0px;
right: 0px;
}
This time the P element is positioned to the top left of the DIV, and not the top left of the screen.
Weaknesses
The biggest weakness of positioning elements absolutely is that it removes the positioned element from the flow of the document. That means if you try to put another element underneath, it won’t take account of the height of the absolutely positioned element and will overlap. You can address this easily enough if the absolutely positioned element is a static height, but if it’s a height that changes then it’s far more difficult.
There are ways to address this issue. You’ll notice, for example, that the “footer” of Fog of Eternity is actually in the right sidebar rather than at the bottom of the screen. Eliminating the traditional style of footer and placing it in the sidebar makes life much easier. There are alternative methods to solve the problem but they’re outside the scope of this introduction to absolute positioning.
Feeling Flexible
Element positioning in CSS can seem intimidating at first, but it does provide massive flexibility in website design. In terms of accurate layout for formal or grid style sites, or for allowing crazier or more scattered designs, positioning is great. I’ll address other aspects of element positioning in articles in the future.
4 Comments
Wow, thanks for the post. I was looking to for a way to change my website’s template, this will help for sure.
Robin – what do you prefer to use if you have the choice Float or Positioning tags
These days I tend to see if I can, by preference, use Positioning tags to define the overall layout. I find it gives a more solid base of layout that glitches less. Still can use floats within that overall base, and there are certainly situations where the Positioning causes issues in itself, but generally Positioning would be my personal preference.
This doesn’t really apply to “Absolute” positioning. I think the title of this post is misleading a bit. I’m not using any floated elements on the page, but IE6 is rendering one absolutely-positioned container incorrectly (it is treating the margin of its parent element as if it were the actually outer boundary for the sake of positioning.I tried adding “clear: both” to the style rules for this element, hoping maybe it was just some weird quirk, but of course, it did nothing.
One Trackback
[...] talked about the advantages of absolute positioning in CSS before. A solid understanding of all the positioning options in CSS is essential to give you the [...]