Positioning Columns With Absolute Positioning Instead of Floats

Question

Hello All,

I have read several articles regarding templates for web site content. They all seem to recommend that the columns should be placed on your site via floats. Example:

<div id="container" style="width: 1000px;">
    <div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ float: left; height: 400px;" ></div> 
    <div id="links_menu" style="border: solid 1px Black; width: 198px; float: right; height: 600px;"></div>      
</div>

However, I always manage to mangle my content whenever I use floats. I spend more time trying to determine where to put my <div syle="clear:both;" />'s than I do actually designing the look and feel of the site. Also, whenever I place one of our third party ComponentArt controls inside a floated container, it manages to get mangled and require me to specify heights and widths, which aren't determined until run time.

Furthermore, I have found that when I use absolute positioning, things seem to work out better for me. Example:

<div style="width: 1000px; height: 600px; position: relative;">
    <div style="border: solid 1px Black; width: 798px; position: absolute; top: 0; left: 0; height: 400px;"></div>
    <div style="border: solid 1px Black; width: 198px; position: absolute; top: 0; right: 0; height: 600px;"></div>
</div>

Anyway, I am still relatively new to Stylesheets and HTML, so I would like to throw this out there to you all to see what you think about this alternative for content placement. Do you see any negatives to this approach? I've tried in most browsers and they all seem to render correctly, but I don't know what the future holds... Or maybe, someone can recommend a better way to float my containers so that the inner content is not floated as well. I'm definitely open to suggestions, and appreciate any feedback that you can provide.

Thanks in advance for your help!

CJAM

Answer 1

A big problem with absolutely-positioned containers is placing content on the page below them when you don't know their heights ahead of time. In your example you have defined the heights of your absolutely-positioned elements, so this shouldn't be a problem for you. If it works for you, use it.

Answer 2

There's really no right and wrong to achieve something with css. It's more about effectiveness/flexibility.

Using absolute-position for column layout decreases that. Inserting, removing a column will require you to recalculate all the positioning. What if there are multiple instance of the same-styled column? We can't reuse the styling 100% since it's absolutely positioned.

There's lots of approach to column layouts. Check out some @ listapart, positioniseverything