Question

I have divided the screen with many div so they stick one to each other (let say, something like chess-board, but with fields of variable sizes). I set heigth and width using percents (relative to parent container).

Now, when I add border: 1px to the divs, all the layout breaks… I imagine that the border adds 1px to each side, and the solution would be to add some internal border. Can I add somehow such an internal border?

Answer 1

You can use box-sizing: border-box to make the border’s width part of the width of the element.

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Browser support.