CSS: two, divs side-by-side

Question

How can I make the green/yellow box be displayed next to the sidebar instead of below it? The green/yellow part should be 100% width.

Here is my sourcecode: 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

Add display:inline-block to both #sidebar and .header