Question

I have an issue when using box-sizing:border-box on a fluid grid I have built. I have 1 main column and then a secondary column that contains 2 grid items. If I add border-bottom: 2px solid grey to the first grid item in the secondary column box-sizing is ignored which makes the grid look off as the second column is now slightly taller that the main one. Can anyone advise how I can make these look even, I understand that this is probably because I havent set heights but I’m not sure how to work round this?

Here is my JS Fiddle http://jsfiddle.net/97qpV/

CSS

body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.featured-news-col {
width: 66.66667%;
float: left;
margin-right: 0%;
display: inline;
border-right: 2px solid grey;
}

.m-news-thumb {
position: relative;
display: block;
}

.sub-article{
    border-bottom: 2px solid grey;
}

.sub-article:last-child{
    border:none;
}


img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
}

.additional-news-col {
width: 33.33333%;
float: right;
}

Answer 1

You’ll need to set heights if you want them to be the same height. HTML elements will, by default “shrink-wrap” their contents, and be only as tall as the contents.

box-sizing doesn’t change this. What it does change is how height and width are determined when things like margins, paddings, and borders are added.

So, for example, if you have a div with the following:

div {
  height: 50px;
  width: 50px;
  border: 5px solid black;
}

With the default box-sizing (content-box), the calculated size of that div would actually be 60x60px (the height/width, plus the size of the border on both sides). However, with box-sizing: border-box, that border is now counted as part of the box size, making its calculated dimensions 50x50px.

Jeff Kaufman has a good demonstration of how box-sizing works, and why border-box makes more sense.