CSS: два, divs бок о бок

Question

Как я могу сделать зеленый/желтый поле отображаться рядом с боковой панелью, а не под ним? Зеленая/желтая часть должна быть 100% ширины.

Вот мой исходный код: HTML

<div id="sidebar"> 

    </div> 

    <div class="header"> 

    </div> 

CSS

#sidebar{ 
    background-color: #404040; 
    height: 100%; 
    width: 50px; 
} 

.header{ 
    margin-left: 50px; 
    width: 100%; 
    height: 200px; 
    background-color: #808000; 
} 

Answer 1

Дайте этому CSS код попробовать, я добавил float. Вы также можете использовать этот jsfiddle здесь, чтобы узнать, что я изменил.
Кроме того, вы хотите взглянуть на ссылку и наконечник (об освобождении), что @Ian Кларк, представленную в комментариях: micro clearfix hack

#sidebar{ 
    background-color: #404040; 
    height: 100%; 
    width: 50px; 
    float: left; 
} 

.header{ 
    margin-left: 50px; 
    height: 200px; 
    background-color: #808000; 
} 

Для получения дополнительной информации о float проверка:

• Float

Answer 2

Добавить display:inline-block как к #sidebar и .header