Can't get my sidebar on the right of content?

Question

I have a webpage, and it has two divs inside the container- content and sidebar1. I don't know why, but whenever I place my sidebar1 div on the right, after the content div, I land up with my sidebar underneath, not next to it!

My code:

HTML

<div class="container">

  <div class="content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
    <div class="sidebar1">
    </div>
  <div class="footer">
    Footer text<!--end .footer --></div>
<!-- end .container --></div>

CSS

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}

I'm still very new to HTML, and don't understand my problem. Thanks in advance!

Solution

The content is 10px smaller than the parent so there is no room for a 192px sidebar next to it (20% of 960px).

You could do something more like this:

#container {
    width: 450px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
    background: #dff;
}

#content {
    overflow: hidden;
    background: #fdd;
}

<div id="container">
    <div id="sidebar">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</p>
    </div>
    <div id="content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
</div>

The above code will float the sidebar to the right of the container and then the content div will take up any of the remaining space in the container. The overflow: hidden tells the div to take note of the floated element when deciding on the size instead of just taking up the full width of the container. For this to work you MUST have the floated elements before the overflow: hidden element.