View Full Version : floated image outsive of div

07-24-2009, 04:57 AM
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.


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

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



*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

07-24-2009, 08:43 AM
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.