¿Por qué no dos bloques en línea se alinean en la parte superior del div principal del contenedor?

Question

tengo a mi HTML como este

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

y 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; 
} 

Ejemplo: http://jsfiddle.net/Hpwff/

El problema es que a pesar de que la suma de los dos divs es 960, que es el mismo ancho como contenedor del padre (# envoltorio), no flotan uno al lado del otro. Tengo que reducir la barra lateral o el ancho de los contenedores principales en 4px para que quepan. ¿Por qué es esto, y hay una forma de evitarlo?

Answer 1

Usted tiene una nueva línea entre los dos div s; ya que son inline-block, la nueva línea entre ellos se representa como un espacio. Without space funciona como esperabas.

Answer 2

Agregar float: left; ¡a cada div y funciona como debería! updated jsFiddle

código Actualizado:

#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

mirar esto: jsfiddle. Debe agregar flotante: a la izquierda de los bloques de la barra lateral y principal. Y agregue bloque claro después de ellos.

Answer 4

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

No hay espacio entre </div> y <div>

Answer 5

Este es uno de los trucos más viejos - es necesario configurar el tamaño de letra del contenedor de embalaje (#wrapper) a 0px y luego cada uno de los niños a lo el tamaño de letra que necesita

Este truco funciona en casi todos los navegadores. Sin embargo, esta vez no es IE, sino Safari que no reconoce la configuración.

Así que el código debería tener este aspecto:

#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; 
}​ 

Puede probarlo en su jsFiddle ya creada, funciona bien.