CSS Div inherit height

Discussion in 'Web Design and Development' started by carlosbutler, Sep 17, 2009.

  1. carlosbutler macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #1
    I am trying to get a container div to surround everything inside it. A div has height set to auto, and will become the same size as the biggest div inside it. The problem is that the div inside it does not start at top:0px, but 350px down the page. This then leads this main div, and everything else below it, to be 350px out the container.

    This is the page: http://constructioncosts.ie.testsites.mediaten.co.uk/

    CSS: http://constructioncosts.ie.testsites.mediaten.co.uk/css/main.css

    I have tried searching many sites and have not come up with anything... Back in the day of tables this would have not been a problem:rolleyes:

    carlos
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    First step: remove absolute positioning. Change to relative.
    Second step: remove top properties. Replace with margin-top and you'll find you need much smaller values.

    That will start to clear it up. I was messing with edits using Firebug and got it exactly how you wanted the layout, without using absolute positioning, and everything stayed inside the div as well. Using properties like top (or left) will move the content from their layout position. Those have to be used carefully as you found. Margin tends to give better results.
     
  3. carlosbutler thread starter macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #3
    thanks for the quick response;). i have changed it now. this was essentially the first time using css for layout, so i was not quite sure on that matter.

    there is one more thing though, if you look back at the web page (now changed) you will see that it looks fine. but the big block of text with the latin in it i had to put margin-top:-430px;, which is the height of the box to the left of it. is there anyway to line both of them up because it seems odd especially if i wanted to have the box on the left have height:auto; (which luckily i dont need). there is also a strange thing where its a few pixels out.

    ps angelwatt your a legend:p
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Easiest fix I can see is to add float:left to #bottomLeftLinks, then you can use a margin-top of 20px for the #bottomRightContent.
     
  5. carlosbutler thread starter macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City

Share This Page