相対的な位置指定されたdivの後ろのマージンの崩壊

Question

ショート・ストーリー：私のフッタはマージン・トップに反応しません。私は多くの様々な方法を試しました（実際には非常に大きな数字で動作します。イメージコンテナ）.Hereのコード：

HTML（私はobiviouslyコンテンツを削除した、コンテンツの前にあるヘッド部、）添付しませんでした：

<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><a href="#"><img src="img/thumb1.jpg" alt="smu"/></a><div class="caption"><span>text</span></div></div> 
    <div class="photo"><div class="heading"><span>text</span></div><a href="#"><img src="img/thumb2.jpg" alt="smu"/></a><div class="caption"><span>text</span></div></div> 
    <div class="photo"><div class="heading"><span>text</span></div><a href="#"><img src="img/thumb3.jpg" alt="smu"/></a><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><a href="index.html">link</a></li> 
      <li><a href="omnie.html">link</a></li> 
      <li><a href="portfolio.html">link</a></li> 
      <li><a href="kontakt.html">link</a></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> 

ここでCSSの一部だ：

を

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; 
} 

疑わしい部品の変更が私にとってはうまくいかない限り、私が推測するものである可能性があるので、CSSのどの部分がドロップするか分からなかった。あまりにも多くの場合は、私は不要な部分を削除すると教えてください。

Answer 1

ここで必要なのは次のとおりです。 すべてのdiv.photo divを高さが指定された1つのディスプレイブロックコンテナに入れます。ここhttp://jsfiddle.net/pXRj3/