Css, Content not staying inside border

I have the height of this div set to 100% but content keep overflowing out of it.

Here is the page: http://cowgirlsbaking.com/membership

CSS:

#content {

 margin-left: auto;
 margin-right: auto;
 background-color: #FCF6E9;
 width:868px;
 height:100%;
 min-height: 650px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border: 10px solid #EB开发者_如何转开发7CDB;

Add overflow: auto; to #content.

It's because when you float objects, they do not take up vertical space in the outer element.

The simplest solution is to add this before the end of the content div:

<br style="clear:both">

Or use a class like .clr { clear: both; } with <br class="clr">

the reason for this is that you have a floating element in the content div, and you don't clear the float.

the best way to fix this is to add clearfix specific styles in your .css and give your container that clearfix class as specified over here http://www.webtoolkit.info/css-clearfix.html