Perché due blocchi in linea non si allineano in alto nel div wrapper parent?

Question

Ho il mio HTML come questo

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

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

Esempio: http://jsfiddle.net/Hpwff/

Il problema è che anche se la somma di entrambi div è 960px, che è la stessa larghezza come contenitore del genitore (# wrapper), non galleggiano l'uno accanto all'altro. Devo ridurre la larghezza della barra laterale o dei contenitori principali di 4 px in modo che si adattino. Perché è questo, e c'è un modo per aggirarlo?

Answer 1

Si dispone di un ritorno a capo tra le due div s; poiché sono inline-block, la nuova riga tra di loro viene visualizzata come spazio. Without space funziona come ci si aspetta.

Answer 2

Aggiungi galleggiante: sinistra; a ogni div e funziona come dovrebbe! updated jsFiddle

codice aggiornato:

#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

Osservare questo: jsfiddle. Devi aggiungere float: lasciato ai blocchi principale e laterale. E aggiungi un blocco chiaro dopo di loro.

Answer 4

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

Nessun spazio tra </div> e <div>

Answer 5

Questo è uno dei trucchi più anziani - è necessario impostare la dimensione del carattere del contenitore di avvolgimento (#wrapper) per 0px e poi ciascuno dei figli a qualunque la dimensione del carattere richiesta

Questo trucco funziona su quasi tutti i browser. Tuttavia, questa volta non è IE, ma piuttosto Safari che non riesce a riconoscere l'installazione.

Quindi il codice dovrebbe essere simile a questo:

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

È possibile testare sul vostro jsfiddle già creato, funziona bene.