Floating images overlapping div's?

MagSafe

MagSafe

MagSafe

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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...
Code: 
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.
 
yeah its because the image is removed from the document flow. Could try a min-height but just add the height of the image in pixels so the div is just high enough.

You'll need a hack for IE6 and older though.
 
When something is floated it is taken out of the normal flow. Just like if position:absolute was used for example. You use clear:both/left/right on the non-floated thing, which tells floated things that they are not allowed on that side.

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.
 
joeyjojo said:
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.
Click to expand...

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
Click to expand...

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

Cheers :)
 
MagSafe said:
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?
Click to expand...
Simple then. Text and image go in the div, and float the img. The image is floated and the text wraps around.
 
You must log in or register to reply here.
Back
Top Bottom