ディビジョンは正しく配置されません。

Question

私は「noobの」という質問に対して申し訳ありませんが、それは私が狂いそうだ...

<div id="footer"> 
     <div id="footer_wrapper"> 
      <div id="project_wrapper"> 
       <div class="footer_image_div project 1"> 
        <p>Axance</p> 
        <img src="/axance/img/upload/small/1336465127.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/3">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 2"> 
        <p>Axance</p> 
        <img src="/axance/img/upload/small/1336465159.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/4">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 3"> 
        <p>Dit is een test</p> 
        <img src="/axance/img/upload/small/1336481215.png" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/5">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 4"> 
        <p>Test project</p> 
        <img src="/axance/img/upload/small/1336564574.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/6">Lees meer...</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

そして、これは、スタイルシートである：今

#footer_wrapper { 
     margin-bottom:auto; 
     margin-left:auto; 
     margin-right:auto; 
     margin-top:auto; 
     width:1000px; 
    } 

#footer_wrapper { 
    margin-bottom:auto; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    width:1000px; 
} 
.project { 
    height:220px; 
    width:270px; 
} 
style.css (line 105) 
.footer_image_div { 
    float:left; 
    padding-left:21.66666666666667px; 
    padding-right:21.66666666666667px; 
} 

私がしたいことは、そのすべての4 DIVSですproject_wrapper（行中）にあり、3つだけが表示され、もう1つはdivの外に隠されていることを示します。 これはどうすれば管理できますか？

もう一度、noobの質問と長い情報について申し訳ありません。

Answer 1

あなたのdivの幅+余白は1000px以上になり、最後のdivを次の行（divの外側）に強制しています。

あなたに.projectの幅を変更した場合：

.project { 
    height:220px; 
    width:200px; 
} 

、彼らがすべてのようにのように1行に収まるます：http://jsfiddle.net/v57n3/

代わりにあなたが追加することによって、最初と最後のdivの余白を調整することができます余分なクラスは好きです。またはあなたが.footer_image_div

.first{ margin-left:0px;} 

または

.last{ margin-right:0px;} 

これは、ボックスモデルを説明する上でのマージンを減らすことができます。すべてのプロジェクトのdivの幅を加算http://www.w3schools.com/css/css_boxmodel.asp

Answer 2

これは、ラッパーのdivでそれら全てを表示になりますコンテナ