SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning behaviour

    I'm puzzled by this in a page I'm working on:

    There's a wrapper called #outerwrap with width and height 100% and position relative.

    Within that there are two or three absolutely positioned divs. The uppermost one has coordinates top:5px left:10px.

    When I first did the layout I'd put borders on all the divs so I could see them. I find now that when I remove the border from the container, #outerwrap, the absolutely positioned divs drop by 180px! I've narrowed it down to even having a 1 pixel border-top on #outerdiv. If that's there everything is positioned as it should be. Take that line out, and down they go! This behaviour happens in Firefox and Safari. IE is unaffected - the positioning is correct either way.

    I've attached the htm and css files and two screen shots - hope someone can help, as I've never heard of a 1px border having such a drastic effect.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The 180px should have given you a clue

    Code:
    #strapline {
        width:100%;
        height:50px;
        background:url(../images/r-l_gradient.jpg) repeat-y;  
        margin-top:180px; 
        border-bottom:1px solid #006633;
    }
    The effect you are seeing is due to collapsing margins where no barrier exist between adjacent or nested elements. The 180px margin on your strapline effectively becomes the top margin on #outerwrap instead.

    As you found out you need a physical barrier such as a border or just 1px padding-top on #outerwrap will solve the problem.

    This is the way margins are supposed to be handled but IE gets it wrong. Read the entry in the Ultimate Reference for a clearer understanding.

    Also note that you cannot do this:
    Code:
    #outerwrap {
        height:100%;  
    }
    Lucki8y for you there is nothing for Firefox to base that height on otherwise you would never be able to have content beneath the viewport. When you set a height then that is all you ever get. In your example the height collapses to auto which means that you have no intrinsic height.

    You would have needed to use min-height:100% instead but only as long as html and body have been set to 100%/. Read the FAQ on 100% height as this is explained in detail and is a complicated subject.

    Just remember that when you set a height for an element then that height will be capped at that dimension and should content exceed the height it will be ignored. IE6 treats height differently though because it treats height as min-height. Read the faq for more info

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found it! There was a div that wasn't closed properly. :-(


    Sorry to take up the time of anyone who looked at the files.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Also watch out for styles like this:
    Code:
    p {
        1.5em;
        }
        
    h1 {
        3.5em;
        }
    What does that mean ?


Bookmarks

Posting Permissions

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