Ok, so I have a 3 column floating divs. All are set float:left
- Left div has fixed width
- Middle div resizes with window
- Right div has a fixed width
Everything looks fine 'til I resize the window and the RIGHT div
goes down below the middle div
and here are some code snippets
<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
Managed to come up with this but there's a gap between the middle div
and the right div
and I can't fill it without making the right div
go down. I can't resize the middle higher than 63% and SO weird...
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>