View Full Version : Resolved Positioning Problem With % Liquid Columns

09-05-2010, 03:08 AM
Finally I got my server sorted out again. My latest experiment is here (http://www.tengunade.pwp.blueyonder.co.uk/experiments/rel_abs-positions/), please have a look, if you will.

You'll see the divs clearly, as I've colour-coded them. Please observe in Firefox first, to see what I mean.

This is not an attempt to create columns of equal height. The end design intentionally has unequal columns, though I have drawn inspiration from the positioning method Mathew James Taylor uses in his system (http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks).

I want to draw your attention to the green column which contains two black divs and two (yes two) white strips on either side. These 'borders' will become the ripped edges to a piece of antiqued paper - which is the green column.

The blue column is the container for the grey box which is going to be the menu. The grey box is positioned absolutely, over the edge of the green column, using a negative value. When finished it will appear as though a wooden billboard has been carelessly placed across the page at a slight angle. This works perfectly.

Now please take a look in Internet Explorer...

The white background image on the right edge of the green page just isn't showing up - but expand the window across the width of nearly two screens (I use dual monitors) and it expands enough to prove it is indeed there, though the div has to stretch out a lot wider in order to reveal it.

The page has failed validation on matters of character encoding and DTD but this does not appear to be the source of the issue right now. I had the two white borders showing perfectly before floating column_3 (the blue div) next to column_2. This is where things seem to have gone awry. The CSS validates with no errors.

By experimenting with the overflow property of '#side_a' gives me a slight clue but not enough to fix it.

Please, does anyone have any ideas what needs doing to this to make it display consistently?

I've tried everything I can think of but have come to a dead end.

Many thanks

Dr. V