View Full Version : Nested div spacing

Oct 26th, 2009, 08: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>


Oct 26th, 2009, 08: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">
<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;
<div id="container">
<div id="nested"></div>
<!--end container--></div>

Oct 26th, 2009, 08: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?

Oct 26th, 2009, 08: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

Oct 26th, 2009, 08:59 PM
Awesome. Thanks!