Css, Content not staying inside border

Question

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 #EB7CDB;

Answer 1

Add overflow: auto; to #content.

Answer 2

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">