Margin collapse after relative positioned div - html

Question

Short story: my footer doesn't react to margin-top, i've tried many various way (well it actualy works on very big numbers, which shows that margin is led from previous element, the image container).Here's the code:
HTML (i've removed content obiviously, and didn't attach head section, which is before content):
<div id="content">
<h1 id="top">header</h1>
<div id="billboard">
<div id="buttony">
buttons
</div>
</div>
<div class="pasek">
</div>
<h2 class="naglowek">Najnowsze prace:</h2>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb1.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb2.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb3.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
</div>
<div id="footer">
<div id="footerwrap">
<div class="footerblock"><h3 id="nav">header</h3>
<ol>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ol>
</div>
<div class="footerblock"><h3 id="info">header</h3><p>some content </p>
</div>
<div class="footerblock"><h3 id="plus">header</h3>
<p class="links"><a target="_blank" href="http://www.smashingmagazine.com">Smashing Magazine</a></p>
<p class="links"><a target="_blank" href="http://www.w3schools.com">W3 Schools</a></p>
<p class="links"><a target="_blank" href="http://www.w3.org">W3 Consortium</a></p>
</div>
</div>
</div>
Here's the CSS part:
div#content{
width: 960px;
margin: 0 auto;
}
div#content h1#top{
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 56px;
text-align: center;
color: #333333;
padding: 0 0 10px;
margin: 20px auto;
border-bottom: 4px #d4d4d4 dashed;
}
div#content h1#top span{
color: #c24b4b;
}
div#content div.pasek{
width: 960px;
height: 30px;
background-image: url('img/pasek.jpg');
margin: 10px 0;
}
div#content div#billboard{
width: 960px;
height: 500px;
background-color: #ffffff;
background-image: url('img/bb.jpg');
background-repeat: no-repeat;
}
div#content div#billboard img{
max-width: 100%;
max-height: 100%;
}
div#content div#billboard a:first-of-type{
margin-right: 40px;
}
div#content div#billboard div#buttony{
width: 565px;
position: relative;
top: 380px;
left: 321px;
}
div#content h2.naglowek{
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 36px;
color: #191a1c;
padding: 5px 55px;
margin: 20px auto;
border-bottom: 2px #d4d4d4 dashed;
background: url('img/tools.jpg') no-repeat;
}
/* jQuery podpisy*/
div.photo{
margin: 0 7px 7px;
position: relative;
overflow: hidden;
float: left;
width: 292px;
height: 292px;
border: 4px #212226 solid;
}
div.photo div.heading, div.photo div.caption {
position: absolute;
background-color: #0e0e0f;
height: 30px;
width: 300px;
color: white;
text-align: center;
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
}
div.photo div.heading{
padding-top: 10px;
top: -40px;
}
div.photo div.heading span{
font-size: 20px;
display: block;
margin-top: -2px;
}
div.photo div.caption{
padding-top: 10px;
bottom: -40px;
}
div.photo div.caption span{
color: #d3d3d3;
font-size: 11px;
display: block;
padding: 0 10px;
}
/* jQuery podpisy koniec*/
/* CONTENT END*/
/* FOOTER */
div#footer{
clear: both;
margin-top: 60px;
color: #636363;
font-size: 14px;
height: 300px;
background-color: #131415;
background-image: url('img/pasek2.jpg');
background-repeat: repeat-x;
}
div#footer div#footerwrap{
width: 960px;
margin: 0 auto;
}
div#footer div.footerblock{
float: left;
width: 320px;
margin-top: 40px;
}
div.footerblock h3{
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
letter-spacing: 0.1em;
text-align: center;
font-size: 24px;
color: white;
padding-top: 15px;
height: 39px;
}
div.footerblock h3#nav{
background: url('img/world.jpg') no-repeat 25px;
}
div.footerblock h3#info{
background: url('img/info.jpg') no-repeat 25px;
}
div.footerblock h3#plus{
background: url('img/chat.jpg') no-repeat 25px;
}
div.footerblock li{
font-size: 18px;
padding: 15px 0 10px 40px;
margin: 0 20px;
background: url('img/flash.jpg') no-repeat 10px;
border-bottom: 1px white solid;
}
div.footerblock a:hover{
color: #808080;
}
div.footerblock p{
margin: 20px;
line-height: 20px;
}
div.footerblock p.links{
background: url('img/cloud.jpg') no-repeat 10px 0;
margin: 17px 20px;
}
div.footerblock p a{
font-size: 16px;
color: #636363;
padding-left: 45px;
padding-bottom: 6px;
display: block;
border-bottom: 1px #636363 solid;
}
Wasn't sure which parts of css to drop since as long as suspected parts changes didn't work for me it could be anything i guess. If it's too much please tell i'll drop unnecessary parts.

Answer 1

Here is what you need to do.
Put all the div.photo divs in a one display-block container with height specified. See here http://jsfiddle.net/pXRj3/