CODEWITHSUNDEEP
htmlcss
Davey
Davey

Reputation: 1324

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

Upvotes: 3

Views: 3366

Answers (3)

DisgruntledGoat
DisgruntledGoat

Reputation: 72560

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

Upvotes: 2

30equals
30equals

Reputation: 329

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

Upvotes: 0

Gert Grenander
Gert Grenander

Reputation: 17084

Add overflow: auto; to #content.

Upvotes: 6

Related Questions