Why display inline block not working? - html

Question

Sorry for this very basic question.
I have these two boxes containing width evenly-
.box1
{
width:50%;
height:200px;
}
.box2
{
width:50%;
height:200px;
}
Here is container div of these boxes-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
I want to know when container div has width of 100% and its containment divs are equally divided to 50% of width.
Then after aligning them inline why isn't it coming in-line?
However reducing width less than to 50% makes them align.
Although if i align them with float attribute its shown inline-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
.box1
{
float:right;
width:50%;
height:200px;
background:red;
}
.box2
{
float:right;
background:red;
width:50%;
height:200px;
}
I want to know the reason why it is not showing them inline whether width is equally divided?

Answer 1

They are inline-block, but usually when using 50% you don't count for pixel rounding and margins/padding. So, in reality, 50% would be 50% + 10px, which will cause the next div to not fit in the same line, breaking the line and dropping it below the first div instead of alongside it. If you inspect the element using Chrome's inspector or Firefox's Firebug, you will notice it doesn't take up the whole width, only just above half of it.

Answer 2

Your border counts as part of the element size, it's an addition and not an inclusion in the width 100%. That will cause an inline element to move onto the next line down.
The box model adds all of it's parts together to get the final size, including padding and margin:
http://www.w3.org/TR/CSS2/box.html
A normal gotcha is that when you specify border 1px you're actually adding two pixels to the final computed size, one to the left and one to the right.

Answer 3

Firstly I would set padding: 0; and margin: 0; incase of any browser allocated padding (user agent stylesheet - this can be seen using inspect element in chrome, or firebug for Mozilla etc), and if you are going to float them then float them left and clear the floats afterward. So you have something like this:
.container{
border: 1px solid green;
width:100%;
}
.box1{
margin: 0;
padding: 0;
float:left;
width:50%;
height:200px;
background:red;
}
.box2{
margin: 0;
padding: 0;
float:left;
background:red;
width:50%;
height:200px;
}
Should do the trick.