Question

I’ve got several <div>s inside another <div>, and they fit just right, but I would like to add a border to distinguish between them. However, when I add a border or an outline, it shows surrounding the outside of the div. Is there a way to get it so that the border will be inside the edge of the div?

Example: http://jsfiddle.net/5cSke/11/

I would like the inner <div>s to all stay within the outer div, and for the borders not to expand and cover anything outside the inner <div>s.

EDIT (Partial Solution): I was able to find a partial solution by setting the overflow of the containing div to hidden, which prevented the borders from spreading beyond the outer <div>, but not from spreading between the <div>s within it.

Answer 1

That’s how the box model works. There is a CSS3 box-sizing: border-box style that will let you do what you want.

Updated Fiddle: http://jsfiddle.net/5cSke/14/