Results 1 to 7 of 7
  1. #1

    100% div + margin

    What I want to do is make a tableless page that has a 15px margin at the left and right side and then has a div that fills up the rest (100%). When I try to do this my div causes the page to scroll horizontally because the width:100% becomes 100%+15px and goes off to the right and out of view. The browser then appears to ignore the 15px margin on the right.

    Does anyone know how I can have a margin on both sides in pixles and still have a div that takes up the entire area between those 2 margins. I am using % because I have no idea what the viewers resolution will be but I want to use pixels for the margin so it is the same everywhere.

    Any help is appreciated. Thanks.

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    <div>s automatically take up 100% of the space provided to them, because they are (generic) block-level elements. So there's no need to declare any width on them.

    Either way, this seems to do the trick:
    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" xml:lang="en">
    <head>
    	<title>Untitled</title>
    </head>
    <body style="margin:0;padding:0">
    <div style="border:1px solid #000 ; margin:0 15px">Foo</div>
    </body>
    </html>
    I tried it with a HTML 4.01 Transitional doctype, and the effect was the same, though you'd only be in danger of seeing a difference if you managed to throw a browser into quirks mode.

    Anywho, there it is Just move everything into a style sheet and you're ready to rock and roll.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Thanks for the info, I've got everything in a style sheet now, the reason I want to use 100% is because there are very few words in this div and therefor does not take up that much space but it has a colored background that I wanted to extend the entire width of the page minus the margins. In other words I need the div to extend past just foo and instead margin to margin.

  4. #4
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    It automatically does just that.

    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" xml:lang="en">
    <head>
    <title>Untitled</title>
    </head>
    <body style="margin:0;padding:0">
    <div style="background:#0F0;border:1px solid #000 ; margin:0 15px">Foo</div>
    </body>
    </html>
    See?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  5. #5
    Huh, so yours does, now I just need to figure out why mine doesn't. Thanks.

  6. #6
    Ah, okay, it's the position:absolute I am using that is causing the problem I believe, does anyone know how to create this and still be able to controle where the divs end up vertically?

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Yes, position:[anything] will force a block-level object to act like an inline object. The good news is that block-level elements automatically stack on top of each other. So just place them in their proper order in your markup, and they'll line up right on top of each other
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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