Nested div spacing

alexmel7

10-26-2009, 07:19 PM

Hello everyone,

I have a nested div that I want to space vertically from its containing div. However, if i add a margin-top to the nested div, it moves both the nested and containing div, and if I apply padding-top to the nested div it does nothing. If I apply padding to the container div, it works, execpt it moves my footer as well. Any suggestions?

Here is an example of what I'm working with:

<div id="container">

<div id="nested"></div>

</div>

Excavator

10-26-2009, 07:28 PM

Hello alexmel7,
Could we see the entire document with? A link would be even better...
Hard to say what your doing with your CSS, if have a DocType or if your code is even valid.

This works - <!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 {
font: 14px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#nested {
width: 50px;
height: 50px;
margin: 10px 0 0 0;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="nested"></div>
</div>
</body>
</html>

alexmel7

10-26-2009, 07:52 PM

Thanks for the quick reply excavator. By looking at your example I see that all I had to do was add 'overflow: auto' to the container div. Why does this work?

Excavator

10-26-2009, 07:54 PM

That clears the float and allows #container to wrap #nested.

Here's a good site that shows how overflow:auto; works http://www.quirksmode.org/css/clearing.html

alexmel7

10-26-2009, 07:59 PM

Awesome. Thanks!