100% div + margin [Archive] - Web Hosting Talk

frentjay

07-19-2005, 02:07 AM

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.

the_pm

07-19-2005, 02:17 AM

<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:
<!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.

frentjay

07-19-2005, 02:52 AM

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.

the_pm

07-19-2005, 07:02 AM

It automatically does just that.

<!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? :)

frentjay

07-19-2005, 01:05 PM

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

frentjay

07-19-2005, 02:59 PM

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?

the_pm

07-19-2005, 03:04 PM

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 :)