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

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

Answer 3

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