Ok, so I have a 3 column floating divs. All are set float:left
- 左divの幅が固定されている
- 中位のdivがウィンドウでサイズ変更されます
- 右のdivは固定幅です
ウィンドウのサイズを変更して右の div
が中央の div
の下に下がるまで、


ここにいくつかのコードスニペットがあります
<div class="divContainer" style="width:300px;">
<div class="divContent">
{RIGHT DIV CONTENT HERE}
</div>
</div>
<div class="divContainer" style="min-width:600px;max-width: 65%">
<div class="divContent">
{CENTER DIV CONTENT HERE}
</div>
</div>
<div class="divContainer" style="width:265px;">
<div class="divContent">
{RIGHT DIV CONTENT HERE}
</div>
</div>
.divContent{
margin : 16px 10px 5px;
}
.divContainer {
float: left;
margin: 0px 20px 20px 0px;
padding-bottom: 10px;
background-color:#FFFFFF;
border: 1px solid #CCC;
box-shadow:4px 4px 13px #bbbbbb;
-moz-box-shadow:4px 4px 13px #bbbbbb;
-moz-border-radius: 15px;
border-radius: 15px;
}
EDIT
これを実現するためには管理しましたが、中間の div
と正しい div
の間にはギャップがあり、適切な div
下に行く。私は63%以上の中間をリサイズできません。
body min-width = 1560px
<div class="divContainer" style="width:300px;">
<div class="divContent">
{RIGHT DIV CONTENT HERE}
</div>
</div>
<div class="divContainer" style="min-width:900px;width: 63%;">
<div class="divContent">
{CENTER DIV CONTENT HERE}
</div>
</div>
<div class="divContainer" style="min-width:100px;max-width: 15%;float: right">
<div class="divContent">
{RIGHT DIV CONTENT HERE}
</div>
</div>
