Left and Right Margin

**tonearm** · Jun 16, 2007 11:10

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?

**markbrown4** · Jun 16, 2007 19:49

Code:

body {padding: 0 20px}

20px down each side of the page.

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

**tonearm** · Jun 16, 2007 20:01

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.

**markbrown4** · Jun 16, 2007 20:08

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>

**tonearm** · Jun 17, 2007 12:02

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?

**Centauri** · Jun 17, 2007 18:48

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.

**tonearm** · Jun 17, 2007 19:42

Thanks Centauri,

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

**Nadia P** · Jun 17, 2007 20:00

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

**markbrown4** · Jun 17, 2007 20:26

or you could use margin instead of padding - then you wouldn't need to hack away at IE.

User Tag List

Thread: Left and Right Margin

Thread Tools

Display

Left and Right Margin

Bookmarks

Bookmarks

Posting Permissions