Div margin only works if outer div has border

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > Div margin only works if outer div has border

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

Div margin only works if outer div has border

Corvus

07-17-04 - 05:14 PM

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.

[ Post Follow-Up to this message ]

Re: Div margin only works if outer div has border

Stephen Poley

07-18-04 - 05:15 PM

On Sat, 17 Jul 2004 14:00:59 +0100, Corvus
<tomcat-pleasespamelsewhere@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/

[ Post Follow-Up to this message ]