SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Kula, Hawaii
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin-bottom not working?

    I have a box that seemed to be working correctly until I filled it with enough content go past a full screen. When that happened, the box went to the bottom edge of the browser even though I have an 11px margin-bottom rule. Here's the info for that box.

    #content {
    position: absolute;
    width: 526px;
    margin-top: 11px;
    margin-left: 11px;
    margin-bottom: 11px;
    border: solid 1px #2D396F;
    background-image: url(images/bg_content.gif)
    }

    Am I missing something? Any help would be appreciated. Thanks.

    Oh yeah, I should add that this is a 2-Column layout and not bound by any equalizing column-height tricks. A very basic layout.
    "I can't promise I'll try. But I'll TRY to try." - Bart Simpson

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have an 11px margin-bottom rule
    That means that any elements underneath will be at least 11pixels away. It has nothing to do with the viewport bottom.

    In mozilla you could position the element using top, bottom left and right and then it would stay in those positions. Unfortunately ie doesn't support this.

    About the only thing you can do in ie (if I understand correctly) is declare the elements height as a percentage and use overflow auto. You'd have to set html,body to height:100% and then set the elements height to say 98% and a margin top of 1%.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Kula, Hawaii
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I just assumed since margin affected both right and top according the the browsers edge, it would affect bottom also.

    Thanks for the help.
    "I can't promise I'll try. But I'll TRY to try." - Bart Simpson

  4. #4
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having the same problem.. but mine concerns text in the footer. So I just gave the text inside the footer a padding and without a border it will never touch the bottom of the screen. Works for me in IE and Firefox, dont have anything else to test with.

    Iunno if thats valid at all. Nor do I know if my input makes any sense, but hey..
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI Restless,

    I think Saber means that he want the element to stay 11px from the bottom of the viewport without going below the fold.

    But if he just wants some padding between the bottom of his text and the bottom of the document/screen then padding will do fine

    Paul


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
  •