Why don't two inline blocks go beyond the top in the parent wrapper of a div?

Question

I have my HTML like this

<div id="wrapper"> <div id="main"> <p>test</p> </div> <div id="sidebar"> <p>test</p> </div> </div> 

And CSS

 #wrapper { width: 960px; margin: 0px auto; } #main { width: 790px; display: inline-block; padding: 0px; margin: 0px; } #sidebar { width: 170px; display: inline-block; vertical-align: top; padding: 0px; margin: 0px; } 

Example: http://jsfiddle.net/Hpwff/

The problem is that even if the sum of both divs is 960px, which is the same width as the parent container (#wrapper), they do not swim next to each other. I need to reduce the width of the sidebar or main capacity by 4 pixels so that they match each other. Why is this, and is there a way around it?

Answer 1

You have a new line between two div s; since they are inline-block , a new line between them is displayed as a space. Without space, it works as you expect.

Answer 2

Add float: left; for each div, and it works as it should! updated jsFiddle

Updated code:

 #wrapper { width: 960px; margin: 0px auto; } #main { width: 790px; display: inline-block; padding: 0px; margin: 0px; float: left; } #sidebar { width: 170px; display: inline-block; vertical-align: top; padding: 0px; margin: 0px; float: left; }​ 

Answer 3

Take a look: jsfiddle . You need to add float: left to the main and sidebar blocks. And add a clear block after them.

Answer 4

 <div id="wrapper"> <div id="main"> <p>test</p> </div><div id="sidebar"> <p>test</p> </div> </div> 

There is no space between </div> and <div>

Answer 5

This is one of the oldest tricks - you need to set the font size of the wrapping container (#wrapper) to 0px, and then each of these children to any font size that you need.

This trick works in almost all browsers. However, this time it is not IE, but Safari, which did not confirm the setting.

So, the code should look like this:

 #wrapper { width: 960px; margin: 0px auto; font-size:0px; } #main { width: 790px; display: inline-block; padding: 0px; margin: 0px; font-size:16px; } #sidebar { width: 170px; display: inline-block; vertical-align: top; padding: 0px; margin: 0px; font-size:16px; }​ 

You can test it on jsfiddle already created, it works well.