html - フローティング div が適切に配置されていない

Question

私が抱えている問題は、フッター div が右側の div の後ろに上がり続けることです。2つのフローティングdivが並んでいる中央のdivがあり、フッターは別のdivであり、ここでどこが間違っているのかわかりませんが、何時間も取り組んでいて、問題を解決できません。

これが私が意味することのjsフィドルです：http://jsfiddle.net/VU3xW/

HTML:

    <div id="middlecontainer">

        <div id="leftContent">

        </div> <!-- end of left content -->


        <div id="rightContent">

             </div> <!-- end of right content -->

</div> <!-- end of middle container -->

<div id="footer">
            <p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a>
            </p>

            <p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
        </div> <!-- end of footer div -->

CSS:

    #rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}

Answer 1

あなたが見逃しているのは、浮遊要素をクリアすることです

デモ

これをコンテナ要素の最後に追加するだけで、 for<div style="clear: both;"></div>を使用して float をクリアすることもできます。また、デモ目的でスタイルをインラインに追加しました。それからクラスを作成し、悪い習慣と見なされるインライン スタイルの代わりにそれを使用できます。overflow: hidden;div

また、フローティング要素をクリアしたい場合は、これを使用して親要素をセルフクリアできます。

.self_clear:after { /* Use this if you wish to ditch IE8 */
   content: " ";
   display: table;
   clear: both;
}

<div class="self_clear"> <!-- Example usage -->
   <div class="floated_left"></div>
   <div class="floated_right"></div>
</div>

この私の答えは、なぜあなたが使用する必要があるのか​​ を詳細に説明しますclear: both;

Answer 2

これを試して

http://jsfiddle.net/VU3xW/4/

#rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}

Answer 3

ミドルコンテナにoverflow:autoプロパティを与えてみてください。