Floating images overlapping div's?

[MagSafe]

Hi there,

I've been trying for hours to get this problem sorted ... but I just can't find a solution!

My problem is with CSS and floating images inside of a div. When the image is floated left or right the div doesn't reach the bottom of the image, it's just completey ignoring the image altogether!

One of the websites i've come across is this, which should explain my problem best.

Things worth noting are that its happening on images being float both left and right, and if I set a height for the div (height: 500px) the problem is solved (but i can't do that as i won't know the height of every div unfortunatly)

My CSS...

img.left { margin: 0 5px 0 0; float: left; }

#section
{
	margin: 15px 0 0 0;
	padding: 0;
	width: 580px;
	font: normal 10pt verdana, arial, helvetica, sans-serif;
	background: #ffffff;
	color: #000000;
	clear: both;
}

Things i've tried...

• Applied 'clear: both;' to the image
• Applied 'position: relative' to both the div and image
• Applied 'display: block' to the image and div
• Applied 'height: auto' to the div
• Applied 'min-height: 100%' to the div
• Applied 'min-height: auto' to the div

Thanks for any help,

Steven.

 

[MagSafe]

Explain what you want to do. If you want text to flow around the image, put it inside the div with the text and float it. If you want it to stick to one side for layout purposes, give the div some padding or margin, or specify a width.

I'm wanting text to wrap around a floated image, both are inside a div ... so are you saying I should apply clear: both; (or clear: right/left) to the text?

You can use the overflow: auto; property on the containing element as a quick and clean float-clearing trick

Hmm, might try giving that a go, but doubt it'll work with what i'm wanting to do.

Cheers

 

[MagSafe]

yeah ... and that's what i was doing in the first place

bah, nevermind.