Floating div goes down when page is resized

Question

Ok, so I have a 3 column floating divs. All are set float:left

1. Left div has fixed width
2. Middle div resizes with window
3. 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>

Answer 1

I think the problem is that the 65% width of the middle div is for the whole document and when the document is resized the middle div gets rezised so that it overlaps the right dif, forcing it to move down.

I think this should work for the middle div: <div class="divContainer" style="min-width:600px;max-width: 90% - 565px">

I havn´t tried it out myself but i think that should work and if not, just try to lower the precentage from 90% to something smaller.

EDIT:
If you want to be able to make the window shorter than 565px wide you can try and set:

BODY {min-width:600px; }

Answer 2

Give max-width for the divContainer in pixel.

eg.

max-width: 710px;

Or you can also reduce max-width to 53%.I tried it works.

Answer 3

将1个div中的所有3列包裹起来并设置最小宽度，以便整个页面不会调整大小。

Answer 4

Setting a min-width + percentage for the middle div is a little error-prone.

How about trying something like this for the middle one?

<div class="divContainer" style="float: none; margin-left: 300px; margin-right: 300px">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

What your essentially doing here is specifically not floating the middle div (so that it's margins slide under the two other ones - and then margin out each side. This way you should get the most flexibility. If the right side still drops, you may need to change the order of the HTML so that the middle div comes after the right one.

Answer 5

SOLVED!!! I floated the first div to the left, the second one the to the right and the middle last no floats just margins based on right and left div width + padding+ margins

<div class="divContainer" style="width:300px;float: left;">
    <div class="divContent">[LEFT DIV StUFF HERE]</div>
</div>

<div class="divContainer" style="width: 250px;float: right;">
    <div class="divContent">[RIGHT DIV STUFF HERE]</div>
</div>

<div class="divWidget" id="clientStatusDiv" style="margin:0px 270px 0 310px;">
    <div class="divContent">[CENTER STUFF HERE]</div>
</div>

YAY!!! lol it even works when resize looks nice!!