Search code examples
htmlcsslayoutborder

2 col layout with borders collapses when zooming out with browser

I have a 2 column layout, which structured something like 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 is no border everything is fine, but when I add it, layout collapses on zooming out.

Solution

  • That's because the border width is added to the content width you specified.

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

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

    You can fix this by using:

    box-sizing: border-box;

    (with appropriate vendor prefixes).