Why do my elements fall outside the div?

HTML & CSS
1

I thought the elements inside the purple <div> would expand the <div> so they are always in purple, but now I have to add a height to <div id=“main”> to push the purple container down far enough to contain the image on the left and the text on the right. Can someone explain to me how to make my container contain all the elements and just some without adding the min-height: 250px; to #main? Or do I not understand how to size a <div>?

Thanks.

the_title.css

#container {width: 960px; margin: 0 auto;}
#main {background-color: rgb(120,120,250); padding: 10px 5px 10px 5px; min-height: 250px;}
#display_left {float: left; width: 502px;}
#display_right {float: right; width: 400px;}

title.xhtml


<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="the_title.css" />
<title>the title</title>
</head>
<body>
	<div id="container">
		<div id="main">
			<div>
				This is text This is text This is text This is text This is text This is text This is text.
			</div>
			<div>
				<div id="display_left">
					<img src="peach.jpg" width="500" height="343"/>
				</div>
				<div id="display_right">
					<div>
					This is more text This is more text This is more text This is more text This is more text This is more text vvThis is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text This is more text.
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
2

No problem, but neither the post nor fix are mine. The post was written my Jeff Starr of Perishable Press, I’m not sure who originally came up with the fix.

3

Thanks for your reply. I will study your post tomorrow.

4

The problem is that your floated elements don’t affect their container in the content flow.

There’s a well accepted method for fixing this called “clearifx”.

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \\*/
* html .clearfix { height: 1&#37;; }
.clearfix { display: block; }
/* close commented backslash hack */

If you add this to your CSS, and then add clearfix as a class to their containing element (in this case, #main), it should make the elements render as expected.

You can read all about it here: http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/

I hope this helps!