javascript - keep container div from shifting last content div to the next line on zoom out -

i have mothly calander day blocks 1- (28-31) blocks per month depending on month. there 6 'option' blocks @ beginning shown or hidden depending on day of week month starts, if month starts on monday, blocks hidden , if sunday, these blocks shown. problem when page zoomed out 75% or less 'sunday' block shifts down line. if see jsfiddle , zoom out 75% see mean. here css. thanks.

.container{ width:58ex;              border:1px solid black;             position:absolute;           }  .date{  width:8ex;          height:8ex;         border: 1px solid blue;         float:left;        }    .day{ width:8ex;         height:4ex;         border: 1px solid grey;         float:left;          background-color:grey;        }  .option{ width:8ex;         height:8ex;         border: 1px solid white;         float:left;       } 

you can achieve desired effect making these changes in css:

.container {      width:56ex;   // <-- instead of 58ex      ...  .container > * { box-sizing: border-box; } 

see, also, short demo (based on code provided).

important:
set sail media kindly reminded me, technic not support in ie version 7 , older. see here more details.

short explanation:
cause of problem:
.container div's width "58ex". each .day div's width "8ex" , border "1px" on each side; total of "8ex + 2px". have fit 7 .day divs inside .container's 58ex's, is:

7 * (8ex + 2px) = 56ex + 14px must fit in 58ex <=> 14px must fit in 2ex 

since 'px' static unit, 'ex' changes dynamically (based on font's size, in turn depends on zooming factor). inevitably, come @ point 14px > 1ex, last div not fit on line , has folded on new line.

'border-box' resque:
quoting mdn, achive using box-sizing:border-box that:
"the width , height properties include padding and border, not margin." (emphasis mine)
so, tell browser, want .day divs 8ex wide including content, padding and border. can read more here.