Hi everyone:

Ok, let me begin with a link to the current incarnation of this layout:

http://www.cooperheatingandcooling.com/index2.php

The goal of this layout is to have the following:

- Semi-fluid width from about 700px to 1200px. We've currently achieved this using the "PIE Jello Mold" technique.
- PNG shadow transparency and rounded edges around the border of the white content area. I want to use the IE alpha hack for transparency in IE 6> so all background positioning must be top left.
- Fluid height based on content.

So far, the following attempts have been made:

1) Percentage based layout using 3 columns for 'left shadow', 'content', and 'right shadow' (all relatively positioned). Because of the percentage based widths and browser rounding errors this would occasionally produce a gap between the 'content' column and the 'right shadow' column. It was an unacceptable error so I scrapped this approach.

2) My next attempt used the same 3 percentage width columns in a left floated arrangement. This cured the occasional rounding error gap. However, because the columns were floated the left and right 'shadow' columns would not expand in height to match the center 'content' column. At least not without setting an explicit height (defeats goal #3).

To get this layout to work I implemented the bottom padding and negative bottom margins (ala the PIE One True Layout method) and hid the overflow to achieve equal height columns.

The problem with this approach rears its ugly head when we needed to use anchors within page text (a documented pitfall of the OTL approach) as there is inconsistent handling of the overflow:hidden property among IE, Safari, and FF.

3) The current layout (as it appears in the linked page now) is using JavaScript to detect the 'content' column height and resize the 'shadow' columns appropriately.

However, this is unacceptable as there is a fairly long delay involved when resizing the browser window on a slower machine (not to mention what happen if JS is disabled) that just looks bad.

So, that's where it stands. Anyone out there have a fresh approach on how to tackle this layout? Or is there something obvious that I've missed?

This project is on a deadline, so if you think you have a solution please email me or post to the list. If you can explain the method and can get a minimal test case working I am more than happy to compensate the person with a working solution.

Thanks,
Nick

Wouldn't it be easier to 'fake' the shadow than going thru all that ?? I have shadows on many of my sites and I do it all with a tiling background that already has the shadow on it. I have a footer with a bg that includes the bottom shadow and the same arrangement for the shadow on the header.

I've never tried the 'one true layout', it's very complicated, more than what I need for 99% of my sites.

I'm not sure I understand the problem with the vertical sizing. Set up correctly, your divs should stretch to hold the content anyway.

I noticed you've got a several hacks in your css, especially the *html hack - those are going to wreck havoc with IE 7.

Hi LadynRed,

Thanks for the response. The reason I can't use a "fake" shadow background is that I need the semi-transparent shadow to show the tiled logo in the background. Since the tiled logo is a separate background image you would see a noticeable edge where the "fake" background ends and the "real" background (tiled logo image) begins.

If the background was a solid color this layout would be no problem since I could use fake shadows.

The vertical sizing issue has to do with the fact that I've got the main area split into 3 separate columns. Since all 3 columns need to be floated left and there's nothing in the left and right shadow DIVs they don't expand to the height of the middle 'content' column.

Basically, I'm searching for a way to get 3 equal height columns without resorting to a JS hack.

Thanks for the heads up on IE 7 and the * HTML hack.

N

You might want to pose this question on the css-discuss.org list. Big John and Holly 'hang out' there as does Zoe Gillenwater and many other CSS gurus. If anyone can help you, they can.