div overlapping sidebar (simple solution)

Question

So I've been having a lot of issues with my website I'm making; I got most of them ironed out but something simple I seem to be overlooking is why one of my divs and not the other is stopping at the sidebar. I don't have the rep to post images so I'm hoping it's alright to post a tinypic link. http://tinypic.com/r/20zrzoo/8

How do I prevent this? Here's my HTML:

<div id="banner"><img src="images/img05.jpg" alt="pool"></div>
<div id="sidebar"><p>Placeholder text</p>
                <pPlaceholder text</p>
                <p>Placeholder text</p>
                <p></p>
                </div>

                <div id="content"><p><img src="images/img07.jpg" alt="tropical forest scene"></p></div>

                  <p>&nbsp;</p>




              <!-- end #content -->

I'm pretty positive I have something placed incorrectly (container wise). Here's my CSS, as well:

#content {
float: left;
width: 0 auto;
padding: 0px 0px 0px 0px;


}

#sidebar {
float: right;
width: 250px;
height: 100%;
padding: 0px 0px 0px 0px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}

#sidebar li li {
line-height: 35px;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar li li a {
color: #181B20;
}

#sidebar h2 {
height: 38px;
margin-bottom: 20px;
padding: 12px 0 0 0px;
border-bottom: 1px dashed #B3B0B0;
letter-spacing: -1px;
font-size: 24px;
color: #262626;
}

#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 0px;
text-align: justify;
}

#sidebar a {
border: none;
}

What am I messing up here?