Выровняйте два блока и избегайте их стояния друг на друга

Question

Я уже давно пытаюсь сделать эти два блока в стороне друг от друга на этой же линии напрасно!

Можете ли вы помочь мне просветить это из

здесь http://jsfiddle.net/9UxZ8/2/

<div class="bookinfo"> 
<h2 id="bleu">Hello,how are you</h2> 
<h3 id="auteur">John Jogn</h3> 
<h4 id="coll">Kings and Queens</h4> 
</div><div class="chapter"> 
<div id="gros"><h3 >I truly believe that you are a cleaver person, but please remain quiet.</h3></div></div> 


div#gros 
{ 
color:red; 
width:350px; 
font-size:30px; 
display: inline-block; 
vertical-align:top; 
} 

div.bookinfo { 
vertical-align:top; 
display: inline-block; 
width: 300px; 
vertical-align:top; 

} 

Answer 1

В вашей разметке есть два родительских div, которые являются .bookInfo и .chapter. Поэтому я предполагаю, что вы хотите отложить их друг от друга. Так что для этого

Добавить display:inline-block в .chapter

.chapter 
{ 
    display: inline-block; 
} 

Js Fiddle Demo

Answer 2

Updated fiddle

В то время как вы имели правильную идею в теории (кроме дубликата vertical-align:top), вы упускаете важный факт, что элементы, которые должны быть вставлены бок о бок, равны .bookinfo и .chapter, а не .bookinfo и #gros.