...

View Full Version : Collapsing Margins?



skibulk
02-17-2011, 07:48 PM
Hello,

I was wondering what you would call the following effect, I thought af first this might be the effect of "collapsing margins", but now I'm not sure.

Example 1) When I inculde <br class="boundary" /> as below:

+ the green #wrapper's min-height:100% fills the page
+ the yellow #content's bottom-margin doesn't trigger a scrollbar effect

Example 2) When I omit <br class="boundary" />:

+ the green #wrapper starts at the top of #content, ignoring its margin-top
+ the yellow #content's bottom margin triggers a scrollbar effect

This is my goal:

+ to have green #wrapper's min-height fill the page
+ to have yellow #content's margins trigger scrollbar effects
+ achieve these effects with CSS and not by adding the <br>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrap {
background-color: #009999;
min-height: 100%;
}
#content {
padding: 50px;
background-color: #FFFFCC;
margin-top: 400px;
margin-right: auto;
margin-bottom: 400px;
margin-left: auto;
width: 400px;
}
.boundary {
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>

<body>
<div id="wrap">
<br class="boundary" />
<div id="content">
This is my example
</div>
</div>

</body>
</html>

Excavator
02-17-2011, 08:31 PM
Hello skibulk,
Pretty sure it's collapsing margins (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html) you're seeing.

Try it this way -

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0px;
}
#wrap {
min-height: 100%;
margin: 0;
overflow: auto;
background: #009999;
}
#content {
width: 400px;
margin: 400px auto;
padding: 50px;
background: #ffffcc;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
This is my example
<!--end content--></div>
<!--end wrap--></div>
</body>
</html>

skibulk
02-17-2011, 08:42 PM
Thanks,

That worked for firefox, but I'm not seeing it at all in IE8.
also,
margin: opx;

Excavator
02-17-2011, 08:49 PM
Thanks,

That worked for firefox, but I'm not seeing it at all in IE8.
also,
margin: opx;

No, it was the <!-- at the top. You had them and I thought I edited them out...


I do type very fast and sometimes hit a o instead of a 0 but I didn't this time. If I did, where?
That line should be margin: 0; anyway.

kansel
02-17-2011, 09:27 PM
@Excavator: I think skibulk was pointing out that omission of the 'px' unit on your declaration.

@Skibulk: While it is very important to include units when declaring a length value, 0 is a special case. According to CSS Pocket Reference [O'Reilly] "... a value of 0 (zero) need not have a unit designator." In other words, 0px is the same as 0% is the same as 0em. Excavator's declaration was perfectly valid.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum