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).
Comments
Post a Comment