html - 2 col layout with borders collapses when zooming out with browser -

so have 2 column layout, structured this:

html structure:

#container   #content   #side-a   .janitor 

css:

#container{ width: 501px; } #content {    float: left;    width: 300px;     border-right: 1px solid black; } #side-a{   float: right;   width: 200px; } .janitor {clear: both; } 

when there no border fine, when add it, layout collapses on zooming out.

that's because border width added content width specified.

#content 300px, #side-a 200px - that's 500px altogether. #container 501px. without border's, you've 1px still left, but...

adding border, 1px, makes #content 300px + 2px wide, #side-a 200px + 2px wide. i'm surprised doesn't collapse when zoomed in.

you can fix using:

box-sizing: border-box; 

(with appropriate vendor prefixes).