<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>JSFiddle : http://jsfiddle.net/5EcPK/
Le code ci-dessus tente de placer la division #left et la division #right, côte à côte, sur une seule ligne. Mais comme vous pouvez le voir dans l'URL JSFiddle ci-dessus, ce n'est pas le cas.
Je parviens à résoudre le problème en réduisant la largeur de l'une des divisions à 49 %. Voir http://jsfiddle.net/mUKSC/ . Mais ce n'est pas une solution idéale car un petit espace apparaît entre les deux divs.
Une autre façon de résoudre le problème est de faire flotter les deux divs. Voir http://jsfiddle.net/VptQm/ . Cela fonctionne bien.
Mais ma question initiale demeure. Pourquoi, lorsque les deux divs sont conservés en tant qu'éléments inline-block, ils ne tiennent pas côte à côte ?
