Question

I have Div named Container whose width is 100%; so its actual width in pixels can be changing from one user to another. Inside that Container, I have 10 boxes, each with the following values:

width:8%;
margin-left:1%;
margin-right:1%;
border:1px solid #000000;
float:left;

With those values, it should render like this, right?

Actually it’s not. The boxes have 8% width in space and 2% width out space (margin)and because of the border line (1px), every box have 10% width + 2px

When you play with the resolution, you will see that from time to time the boxes are extending a second line and it appears like this:

How can i fix this layout?

I thought about placing another box inside those boxes which would set the border for the outer box, but it’s not quite working for me.

Answer 1

I have created a jsfiddle for this. Adding a new div for each inner boxes and setting following properties will solve the problem. (The key was to move the border from the out boxes to the inner box.)

width: 100%;
height:100%;
border: 1px solid #000000;