Expanding or collapsing parent div after positioning child divs - css

Question

I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>

Answer 1

You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}

Answer 2

if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/