Straight forward CSS Layout - css

Question

I'm sure this has been asked before but I'd really like to know why this is doing what's it's doing rather than just the answer (if there is one).
What I've got is a pretty simple layout at the moment, which consists of a main wrapper div, a header div, a content div and a footer div. The problem I'm having is when I come to place a number of squares within the content div and set their positioning to absolute - so as to lay them out in a grid so that they span the entire width of the content div. When I set these divs to absolute the footer div jumps up and does not appear below the grid of divs sitting in their parent content div. If I set the height of the content div to a value the footer div sits where it should, but if I don't or set it to auto (as I want to do) then the footer div sits effectively below the content div.
I have read that setting anything to absolute takes it out of the normal flow of the document, but is there anyway I can set the content div so that the height of the content div is set by the contents (ie the grid of divs) and also so that the footer div always sits below the content div?
Here is a mock up http://jsfiddle.net/M4jyH/3/
And here is my code
#wrapper {
width: 400px;
height: auto;
border: 1px solid #000;
margin: 10px auto;
padding: 10px;
}
#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}
#content {
position: relative;
width: 100%;
/*height:92px;*/
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
position: absolute;
width: 92px;
height: 92px;
background-color: #999;
}
#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<div class="box" style="top:0px; left:0px;"></div>
<div class="box" style="top:0px; left:102px;"></div>
<div class="box" style="top:0px; left:205px;"></div>
<div class="box" style="top:0px; left:308px;"></div>
</div>
<div id="footer">footer</div>
</div>​

Answer 1

You don't need to use position: absolute for the inner elements, to position them horizontally just use float: left with margin for spacing. You will still get a similar collapsing height going on with regard to the content region - because again floats are partially taken out of the content flow. However, this is easily fixed by applying overflow: hidden to the content area.
I've added first and last classes to your box elements, just to make handling margins easier:
<div id="content">
<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box last"></div>
</div>
I've also altered your css items as follows:
#content {
overflow: hidden; /* <-- added overflow hidden */
position: relative;
width: 100%;
outline: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
float: left; /* <-- replaced pos abs with float left */
margin-right: 10.5px; /* <-- added a specific margin */
width: 92px;
height: 92px;
background-color: #999;
}
.box.last {
margin-right: 0px;
}
With regards to using 10.5px for the margin, it is probably best if you re-evaluate the dimensions used so this is not necessary. However most modern browsers will handle this correctly.
http://jsfiddle.net/M4jyH/5/
position: absolute should really only be used for items that you specifically want taken out of the document flow and to not interfere with anything else.