image doesn't push height of div

[novicenate]

I have an image inside a DIV. I did not set its height because page lengths will change. But when the copy is shorter than the image, the DIV matches the text and the image is going outside the DIV area. Here is my code in the HTML:

<div class="maincontent"><img src="images/g.jpg" width="250" height="350"><h1>Page Title</h1><h2>Brief punch line according to page</h2><p>This is the main copy to help describe what is talked about on this page.</p></div>

and this is the code for the style:

.maincontent{	width:700px;	margin:0 auto;	background-color:#f3ece0;	background-image:url('images/mainbg.jpg');	background-repeat:repeat-x;	}.maincontent h1{	margin:0px;	margin-left:15px;	padding-top:15px;	font-family:helvetica, arial;	font-weight:bold;	font-size:17pt;	}		.maincontent h2{	margin-top:5px;	margin-left:15px;	font-family:helvetica, arial;	font-weight:bold;	font-style:italic;	font-size:11pt;	}	.maincontent p{	margin-left:15px;	margin-top:25px;	width:350px;	font-family:helvetica, arial;	font-size:10pt;	line-height:125%;	}	.maincontent img{	float:right;	margin-left:50px;	}

I'm somewhat new to this, so I'm sure there's a better way. I would appreciate some help!!

[Ingolme]

Change your HTML to this:

<div class="maincontent"><img src="images/g.jpg" width="250" height="350"><h1>Page Title</h1><h2>Brief punch line according to page</h2><p>This is the main copy to help describe what is talked about on this page.</p><div class="clear"></div></div>

And add this CSS:

.clear { clear: both; }

Floated elements (like your image) don't add to the height of their parent nodes, you have to clear them with another element below.

[rzea]

110% agree with Ingolme's solution.