Divs, margin and styling

HTML & CSS
1

Hello guys, I’m having a problem here…

I’m having a wrapper with a width of 960pixel, in that wrapper I have a div called firstTopSection, with a width of 940px, and a height of 300pixel, and a margin on 300pixel, and background of white.

Inside firstTopSection I have a div called canvasHolder, with a margin of 10 pixel, width of 920pixel, and a height of 280pixel… Color of yellow…

It should look like this:

But looks like this

My coding is following:


<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
#wrapper {
	width: 960px;
	margin: 10px auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	background: green;
	box-shadow: 0 2px 5px black;
	-webkit-box-shadow: 0 2px 5px black;
	-moz-box-shadow: 0 2px 5px black;
	padding-bottom: 10px;
}

.firstTopSection {
	width: 940px;
	height: 300px;
	margin: 10px;
	background: white;
}

.canvasHolder {
	margin: 10px;
	width: 920px;
	height: 280px;
	background-color: #fae062;
}
</style>
</head>
<body>
<section class="firstTopSection">
  <div class="canvasHolder">
     lorem ipsum
  </div>
</section>
</body>
</html>

I can’t see what the problem is :S

Can anybody help?

Thank you!
Best regards,

Lucas

2

This is a case of collapsing margins.

One way to deal with it is to remove one px from the top margin and instead put a 1px border at the top to keep the margins from collapsing:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<style type="text/css">
#wrapper {
  width: 960px;
  margin: [COLOR="Red"]9px[/COLOR] auto 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  background: green;
  box-shadow: 0 2px 5px black;
  -webkit-box-shadow: 0 2px 5px black;
  -moz-box-shadow: 0 2px 5px black;
  padding-bottom: 10px;
  [COLOR="Red"]border-top: 1px solid green;[/COLOR]
}

.firstTopSection {
  width: 940px;
  height: 300px;
  margin: [COLOR="Red"]9px[/COLOR] 10px 10px;
  background: white;
  [COLOR="Red"]border-top: 1px solid white;[/COLOR]
}

.canvasHolder {
  margin: 10px;
  width: 920px;
  height: 280px;
  background-color: #fae062;
}

section {display: block;}
</style>
</head>
<body>
<div id="wrapper">
<section class="firstTopSection">
  <div class="canvasHolder">
     lorem ipsum
  </div>
</section>
</div>
</body>
</html>

Don’t forget to include a doctype. Also, this is a CSS topic, so thread moved to that forum. :slight_smile:

3

Nice! Thank you very much Ralph.m!

You just took away my 3 hours headache! :smiley:

But I must say, it’s weird it does like that, somehow, it should work ‘normal’…

4

Collapsing margins are a pain at times as it seems more often than not you don’t want them to collapse. However once you understand how (and why) they work the way they do then you can cater for them quite easily. :slight_smile:

5

If you want, say, 1em margin above and below your paragraphs, I like the way the top and bottom margins of each paragraph merge with those of the next. It would be a hassle if the space between paras doubled. So there are advantages.

6

Yeah, I can see something handy in the collapsing, but there should be a like “margin-collapse: none” property or something,

But yes indeed, I understand why it’s like that I think…

You have a div that is 200x200 pixel, and a div inside that is 180x180 pixel, with a 10pixel margin… Margin is giving space outside the box to the next “element” the next element is “taken” up by the margin, so it take it’s parents “outline of the margin”, because it’s the closest “item” where you really have something that isn’t a margin lol…

Confusing, but I think it’s something like that…

But the margin-collapse:none" would be awesome :smiley: