SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Left and Right Margin

    Is there a way to create a margin that will be applied to the left and right sides of a page that contains an absolutely positioned div? I don't want to wrap the non-absolutely positioned elements in a div if I can help it.

    I basically want a left and right margin down this page:

    <body>
    <h1>title</h1>
    <p>paragraph</p>
    <div style="position:absolute;top:0">header</div>
    </body>

    I spent quite a bit of time fiddling with CSS attributes of the body tag and the absolutely positioned div to make this work, but IE and Firefox would not agree. Can anyone come up with anything?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Code:
    body {padding: 0 20px}
    20px down each side of the page.

    My bet is you don't need to absolutely position the header

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, IE and Firefox don't render that the same way with the absolutely positioned div in there. The absolute positioning is for source ordering.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Use the global reset outlined in the CSS FAQ, then you need to put back margin/padding where you are wanting it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    body { padding: 0 20px;}
    </style>
    </head>
    
    <body>
    <h1>title</h1>
    <p>paragraph</p>
    <div style="position:absolute;top:0">header</div>
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you test this, it looks good in Firefox Linux but IE6 is giving the header an extra margin on the left:

    <html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    * {margin:0;padding:0}
    body {padding-left:10%;padding-right:10%}
    </style>
    </head>
    <body>
    <div style="margin-top:1em;background-color:#0000FF">Element 1</div>
    <div style="background-color:#0000FF">Element 2</div>
    <div style="position:absolute;top:0;padding-left:10%;padding-right:10%">
    <div style="background-color:#FF0000">Header</div>
    </div>
    </body>
    </html>

    Do you see what I mean?

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats because IE6 references absolute positioned children to the inside of the parent (inside the padding) instead of the outside of the parent (where the border is). Probably need to feed IE6 its own position info here.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Centauri,

    What do you mean by feeding IE it's own position info? I hope it isn't a Javascript trick.

  8. #8
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a conditional comment in the head of the document, or feed a separate stylesheet for IE6 or IE7 whichever you are targetting - more about this here:
    http://www.quirksmode.org/css/condcom.html

    Nadia

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    or you could use margin instead of padding - then you wouldn't need to hack away at IE.


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
  •