Solved: Question about CSS margins

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

tomdkat

Thread Starter
Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
So, I've been playing with some nested DIVs and noticed something strange.

Here is the HTML in question:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>DIV top margin</title>

  <style type="text/css">
.inner {
  border: 1px solid black;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 220px;
  height: 280px;
  margin-top: 10%;
}
.outer {
  display: block;
  width: 800px;
  height: 600px;
  margin-right: auto;
  margin-left: auto;
  background-color: #99ffff;
}

  </style>
</head>
<body>

<div class="outer">
<div class="inner">inner DIV</div>

</div>

</body>
</html>
This produces a DIV that is 800px X 600px with a colored background. Inside that DIV, there is another DIV with the text "inner DIV" and a 1px border. Now, the inner DIV has a top margin of 10%.

What's strange is the parent DIV has this 10% margin applied to it!!! If I add a border to the outer DIV OR if I add some text to the outer DIV, the 10% margin of the inner DIV is applied to inner DIV and not the outer DIV.

Why is this?

Peace...
 

Attachments

Joined
Mar 28, 2006
Messages
690
Hey,

What is the end result you actually want? Which one, and what margins with what borders?

Let us know and i'll write fixed css for u

Ta
 

tomdkat

Thread Starter
Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I've got the CSS worked out such that the 10% margin applies only to the inner DIV. The second attachment shows what I'm after. I'm asking why the 10% margin applies to the outer DIV when it's specified on the inner DIV unless the outer DIV has a border or text of its own. :)

Peace...
 
Joined
Mar 28, 2006
Messages
690
It's a padding bug - wack a touch of padding to the top of the outer div and you'll be sweet... for example:

.outer {
display: block;
width: 800px;
height: 600px;
margin-right: auto;
margin-left: auto;
background-color: #99ffff;
padding: 1px 0 0 0;
}

that extra padding on the top (be it 1px or 10px or whatever stops the 10% margin on .inner affecting .outer.)
Hope that helps
amx
 

tomdkat

Thread Starter
Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I guess adding the padding is the moral equivalent of adding a border or text to the outer DIV. Is this really a bug? I saw the behavior I described above in Firefox, Opera, Safari, and Maxthon 2.0.9 (IE6 engine). Or is the "bug" in the CSS rules governing margins?

Thanks!

Peace...
 
Joined
Mar 28, 2006
Messages
690
i've never come across it before, it's quite strange so i would say bug, unless im missing something obvious!!
 

tomdkat

Thread Starter
Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
Well, I found the answer to this question on another forum. The behavior I experienced is correct, per CSS 2.1 specs. It's called margin collapsing. There is an easier to digest description here. The second link was easier for me to digest, at least. :)

Peace...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Members online

Top