Floating divs goes down when page is resized

Question

I have a main div, and inside it..I have 3 divs

In normal view it works perfect i need the exact samething but for some reason if i resize my browser one div at the right side will float down i figure the reason for it but i don't know how to resolve it . floating down of div is due to the border i have give to the div but i have given the borders with perfect calculations but i don't know why still it happens

HTML

<div class="box">
    <div class="box_top"></div>
    <div class="box_left"></div>
    <div class="box_right"></div>
</div>

CSS

.box{
    width:500px;
    height:300px;
}
.box_top{
    width:500px;
    height:49px;
    border-bottom:rgb(239,239,239) 1px solid;
    background-color:#636;
}
.box_left{
    width: 249px;
    height: 250px;
    float:left;
    background-color: #093;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFF;   
}
.box_right{
    width:250px;
    height:250px;
    float:left;
    background-color:#006;
}

please go hear for the issue : http://jsfiddle.net/gtczu/

Answer 1

Add min-width: 500px; to .box , when the browser window gets smaller than 500px, the horizontal scrollbar will appear.

Check your updated Fiddle

Answer 2

It's because you are floating left without having a width set on the container. I would set a min-width or just a width on the containing div.

Answer 3

这是因为在调整大小时，所有内部div的总宽度都大于视口的大小。这就是为什么在调整大小时最后一个div向下浮动的原因。尝试以百分比表示所有宽度。可能工作