2 col layout with borders collapses when scaling using a browser

Question

So, I have a two-column layout that structured something like this:

Structure

html:

#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 is no border, everything is fine, but when I add it, the layout is minimized when scaling.

Answer 1

This is because the width of the border is added to the width of the content you specify.

#content is 300px, #side-a is 200px is 500px. #container is 501px. Without borders, you have 1px left, BUT ...

Adding a border, even 1px, makes #content 300px + 2px wide, #side-a 200px + 2px wide. I am surprised that it will not collapse with an increase.

You can fix this using:

 box-sizing: border-box; 

(with the appropriate vendor prefixes).

Answer 2

Ideal solution: Do not use float for this type of column layout. You are using a container with a fixed size of 501px; therefore, there is no need for dynamic swimming: just specify the positions explicitly - that is, if the height is determined correctly. Alternatively - yes, really - use a table (or css display: table if you like semantic cleanliness), which implements columns naturally.

Regarding the specifics of your question: you have 1px borders and 200px + 300px content, which seems to add up to 501px - that is, it should fit. However, browsers cannot calculate widths with arbitrary precision; they are rounded off to some internal precision - and especially when enlarged, this accuracy may be related to the pixels of the device, not CSS pixels: if rounding introduces a bit of jitter, the sum of 1 + 200 + 300 may be slightly larger or slightly less than 501, and therefore cause the layout to suddenly stop fitting in the 501px container. That's why you should probably never use this CSS coding style - it is extremely device and browser specific and may be interrupted without warning due to small changes. I bet your layout won't break when zoomed in all browsers ...