white space below content when using relative position

Discussion in 'CSS' started by Rhysickle, Aug 8, 2006.

  1. #1
    Hello
    I have a <div class="container"> which I have used to centre my page in the browser. Within this I have a left menu - in static position - and content, which I have moved up to the same level as the menu using relative positioning.

    The problem I have is that the <div class="container"> has a bottom border. As the browser thinks the content is still at the bottom of the div, there is a big white space where it thinks it is, with the border of the div going under it. How do I make it go up to the bottom of the menu/content (whichever reaches down lowest)

    Thanks for your help

    Rhys
     
    Rhysickle, Aug 8, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    That's the way relative positioning is supposed to work. The rendered bit is taken out of the flow and shifted relative to its natural position. The original in-the-flow position is left in the flow and its space preserved. When used with understanding, this is a Good Thing.

    For a simple two column layout, see this 2 column, apparent equal height css layout demo. Find some tutorials on floats. "Floatutorial" will be at the top of a Google search, and is a good'n.

    cheers,

    gary
     
    kk5st, Aug 8, 2006 IP