How to have multiple div blocks of the same size accept 100% of the parent container

Question

I have the following CSS:

#imageContainer { width: 100%; margin: 0px; margin-bottom: 10px; } .divSelectImage { border: 2px solid red; width: 25%; margin: 0px; margin-bottom: 10px; float: left; } 

I have four instances of .divSelectImage , so the width is 25%. I expect to see all four images next to each other inside the #imageContainer . Essentially, four images should occupy 100% of the #imageContainer , which in turn will occupy 100% of the screen.

But I do not. Despite the fact that in Firebug, 25% each, the last image moves to the next line. I have to make them about 24.5% for them to fit, but I don't want the gap to be at the end.

This happens in both Firefox and Google Chrome.

Is there any CSS magic I'm missing? How can i do this?

I installed the script on JSFiddle: http://jsfiddle.net/J3KXE/

Answer 1

This is because you did not take into account 2px borders on each image, adding 12px in addition to the 100% width of its containing block. You can use the box-sizing property, which is new to CSS, to limit the borders and fill areas to the width of the content of elements:

 #imageContainer { width: 100%; margin: 0px; margin-bottom: 10px; } .divSelectImage { border: 2px solid red; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25%; margin: 0px; margin-bottom: 10px; float: left; } 

http://jsfiddle.net/J3KXE/1/

Answer 2

2 solutions:

 box-sizing: border-box; 

or

flexbox and all that shit (see http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ )

Answer 3

You have a 2px border that increases the size of the boxes to 25% plus these 2px on each side. If you do not need to support IE7, you can simply use the window size: border-box . If you need to consider an older browser, you will have to declare a wrapper div 25% wide without any borders / fields / additions and add these styles to the child element.