I understand the frustration, believe me.  Still, I have to wonder at the
insistence to use absolute positioning when it's not the proper tool for the
job. It's certainly a wonderful technique that opens a lot of doors to us,
but it is rarely the proper approach when trying to emulate the table hacks
we have all learned over the past few years!

http://webctr.com/css-footer.html

Floats work just fine for what you are trying to do.  In fact, the only
thing about this page that is different from your description is that I
reduced the width of the center column because the fit was too tight at 505
pixels and the right column dropped below the first two in Mozilla.

I personally went through the headaches you are describing last Summer.  I
remember thinking that it was crazy to spend so much time and energy on such
a simple thing.  It wasn't until I changed my way of thinking about it that
I became less frustrated.  Basically, I use absolute position sparingly
unless I know the exact height and width of the display - similar to the way
that such things are known for sure in print media.  When I want more
flexibility - a more liquid display - I tend to fall back on floats.  Is
there any reason you *have* to use absolute positioning to achieve your
goals?

As a final though, I will sometimes place the footer information beneath the
content copy, too, instead of beneath the entire set of columns.  Probably
not something that would help on this design, but it has helped me in other
cases.

I hope the example above helps somebody avoid a bit of the hair-tearing I
went through...:).

D


----- Original Message -----
From: "Mike Taylor" <lonewolf(at)one.net>

Basically what I'm trying to do is achieve absolute positioning like I could
with a table:  actually define, pixel by pixel, where each area of content
will be displayed.

I have a top navigation bar that has to remain a static width of 760px.

I have a left-hand sidebar that is 135px wide.

The middle column is fixed at 505px.

The far right sidebar would be 120px wide.

Underneath the three columns would be a footer.

The height of any of the columns would be variable depending on the amount
of given content.   The footer would appear below and span the entire length
of all three columns at all times.

I took a look at your example and see why it appears to be working:  the
three columns are set up as floats, with variable widths measured in
percentages.  None of the other DIVS are absolutely positioned.

With a table, this task can be achieved inside of five minutes.  The issue
seems to be a very hot topic based on the search results I've found that try
to address the issue.  Seems like a fairly significant failing of CSS,
especially since its alleged strength is to provide a broader power to
position elements on the screen.

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA