html CSSレイアウトが意図したとおりにレンダリングされない

Question

私は敏感なウェブページを作成しています。

これは私がやろうとしていることです。デスクトップビューでjsfiddle

<div id="container"> 
    <div id="one">#one</div> 
    <div id="two">#two</div> 
    <div id="three">#three</div> 
    <div id="four">#four</div> 
    <div id="five">#five</div> 
</div> 

私は#fiveが#threeの底に触れたいと思います。

画面サイズを小さくすると（モバイルビュー）、divは正しく並べられます。

#fiveをデスクトップビューの#threeの下にタッチするにはどうすればよいですか？

Answer 1

#fiveからfloat: rightを削除し、overflow: hidden

#five { 
    width:200px; 
    height:70px; 
    background:#368736; 
    overflow: hidden; 
} 

#container { 
 
    max-width:500px; 
 
    width:100%; 
 
    color: #fff; 
 
} 
 
#one { 
 
    width:300px; 
 
    height:200px; 
 
    background:#66BCD9; 
 
    float:left; 
 
} 
 
#two { 
 
    width:200px; 
 
    height:50px; 
 
    background:#A1A6E6; 
 
    float:right; 
 
} 
 
#three { 
 
    width:200px; 
 
    height:50px; 
 
    background:#E3A1E6; 
 
    float:right; 
 
} 
 
#four { 
 
    width:300px; 
 
    height:100px; 
 
    background:#ED5894; 
 
    float:left; 
 
} 
 
#five { 
 
    width:200px; 
 
    height:70px; 
 
    background:#368736; 
 
    overflow: hidden; 
 
}

<div id="container"> 
 
    <div id="one">#one</div> 
 
    <div id="two">#two</div> 
 
    <div id="three">#three</div> 
 
    <div id="four">#four</div> 
 
    <div id="five">#five</div> 
 
</div>

を追加