Problem with image alignment and div...

[beley]

My website is www.eleytech.com - I am adding an image to the home page.

Below is an attachment with the problem highlighted - the image is float: right and the text moves out of the way but the div border/size doesn't. Any clue how to get the "important" div (the one with yellow background) to get out of the way of the picture? I am making pictures like this for each major page.

I'm trying to make the site CSS and XHTML compliant (strict) so I really want to do it right, no hacks. Any thoughts?

[Paul O'B]

Hi,

The only way of doing this without hacks is to give your imortant class a width.

Otherwise the default behaviour of backgrounds and borders alongside floated elements is for the background and border to extend under the float. Floats only add padding to the content and not the background of the content.

IE usually does clear its backgrounds automatically but that is the wrong behaviour according to the specs.

IF you cant set a width on .important (for some reason) then I can only offer hacks for ie and mozilla.

.important {
	margin: 0px 15px 0px 15px;
	padding: 0px 5px 0px 5px;
	background-color: #FFC;
	border: 1px solid #CCC;
	overflow:auto;
}
/* commented backslash hack v2 \*/ 
* html .important {height:1%;}
/* end hack */

Adding overflow:auto to an element next to a float causes mozilla to clear the content and the background automatically. The height :1% gives ie layout (haslayout) and it works as it normaly does.

However opera will not be so kind and will only move out of the way with a width.

Sorry but thats all the solutions I know to this behaviour.

Paul

[beley]

Well, if that's the only way I guess I don't have a choice. I don't think that will prevent it from validating will it?

Anyway, it looks much better now... thank you very much!

[Paul O'B]

It will validate fine in the format I gave Just make sure theres a space between * and html e.g. * html and not *html

Paul