Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Midlands, UK
    Thanked 29 Times in 28 Posts

    Positioning Problem With % Liquid Columns

    Finally I got my server sorted out again. My latest experiment is here, 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.

    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
    Last edited by Doctor_Varney; 09-05-2010 at 05:06 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts