floated image outsive of div

[trex1t]

Hi guys, noob question, but when I saw this it broke some of the rules I thought I had known.

I want to float my image to the right and have paragraph text wrap around it. I do not know why the image is outside of my #main div with the gray background and darkblue border, but I don't want it to be. Relative code below.

www.gowithjon.com/aboutme.html

<div id="main">
<h2> About myself <h2>
<hr>

<img src="img/aboutme/me.jpg" style="position: relative; float: right">

<p>...</p>

</div>

*I don't think position: relative is necessary, but not having it doesn't change anything.

#main {
position: relative;
top: -20px;
background: #EAF3F8;
border: 20px #153e56 solid;
margin: 0px 50px;
width: 60%;

}

Thanks all

[SB65]

It's because the <img> is floated, so #main doesn't extend to the bottom of it (although it does in IE, technically incorrectly). Try adding overflow:auto to #main - this will clear your float and extend #main.