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

添加display:inline-block到#sidebar和.header

Answer 2

Give this CSS code a try, I added a float property. You can also use this jsfiddle here, to see what I changed.
Also you want to have a look at the link and the tip (about clearing) that @Ian Clark provided in the comments: micro clearfix hack

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

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

For more information about float check:

• Float