469,342 Members | 5,438 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,342 developers. It's quick & easy.

Div margin only works if outer div has border

Hi All,

I've been having real trouble with some css in both Win/IE6 and
Win/Firefox0.9.2 that doesn't make sense to me. I have a div that is
supposed to be spaced away from the top and right hand edges of it's
containing div and therefore I set suitable values for it's margins.
Unfortunately it refuses to move itself unless I give the parent div a
border.

Perhaps this will make more sense with an example (I've boiled the
problem down to a relatively small code sample):

--- START XHTML ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Template</title>
<link href="draft1_style2.css" rel="stylesheet" type="text/css" />
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
</head>

<body>

<div id="page">

<div id="content">

<h2>Segment Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisienim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim quiblandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisienim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor inhendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim quiblandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<div id="nav"><p>paragraph</p><p>paragraph</p><p>paragraph</p></div>

</div>

</body>

</html>

--- END XHTML ---

--- START CSS (draft1_style2.css) ---

body
{
background-color: black ;
}

#page
{
border: 1px solid #ffffff ;
position: relative ;
background-color: #ff0000 ;
}

#content
{
margin: 60px 110px 0 0 ;
background-color: #00ff00 ;
}

#nav
{
position: absolute ;
top: 60px ;
right: 0 ;
width: 110px ;
background-color: #0000ff ;
}

--- END CSS ---

To see what I mean try changing the border width attribute in the style
#page to 0.
Jul 20 '05 #1
1 4530
On Sat, 17 Jul 2004 14:00:59 +0100, Corvus
<to************************@phiz.org.uk> wrote:
I've been having real trouble with some css in both Win/IE6 and
Win/Firefox0.9.2 that doesn't make sense to me. I have a div that is
supposed to be spaced away from the top and right hand edges of it's
containing div and therefore I set suitable values for it's margins.
Unfortunately it refuses to move itself unless I give the parent div a
border.

Perhaps this will make more sense with an example (I've boiled the
problem down to a relatively small code sample):


Read up the CSS spec on collapsing margins (section 8.3.1). I think the
margin of your DIV is collapsing with the page margin, though I haven't
got every detail clear in my mind. When this is a problem it's generally
recommended to use padding instead of margin, though a 1px border of the
same colour as one of the backgrounds would presumably also work.

HTH

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

22 posts views Thread by moocow | last post: by
2 posts views Thread by Florian Brucker | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
13 posts views Thread by Cool Guy | last post: by
6 posts views Thread by Hacking Bear | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.