html - Why is this div dropping down to the next line on window zoom out? -

jsfiddle

i have wrapper 4 divs inside floated left , in 1 line. when zoom out, 4th div drops bottom. possible problem can think of width of wrapper decreasing, causing not able contain 4th one, wrapper has fixed width i'm sure thats not problem.

here's html:

<div id="wrapper">         <div id="panel">         <div id="panel1" class="panelcell"></div>         <div id="panel2" class="panelcell"></div>         <div id="panel3" class="panelcell"></div>         <div id="panel4" class="panelcell"></div>         <div class="spacer" style="clear: both;"></div>     </div> </div> 

and here's css:

#wrapper{     width: 1280px; } #panel{     width:100%; }  #panel .panelcell{     width: 318.75px;     height: 213px;     float: left;     border-right: 1px solid white; }  .panelcell {     background-color: gray; }  #panel1{     border-right: 1px solid white; } 

i think root of problem how browser renders widths of "318.75px" zoom out (since, well, can't render 0.75px screen). depending on how it's rounded elements scale zooming out, elements' widths end adding larger of parent element, resulting in last floated element being pushed new line.

the way (that think of) solve using percentage widths, rather decimal pixel widths. changing definition of #panel .panelcell should give you're looking for:

#panel .panelcell{     width: 25%;     height: 213px;     float: left;     border-right: 1px solid white;      -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

the box-sizing: border-box ensures 1px border taken account when determining 25% width of element. here's updated jsfiddle show achieves. (the fourth element should not break new line zoom out.) if isn't looking for, let me know , i'll happy further!