category image - weird float behavior

[quentinjs]

I have a weird problem when I do the following: (example: http://www.totalgarage.ca/products/i...index&cPath=29 )

img.floatLeft {
float: left;
clear: left;
margin: 4px;
}

I do this for the the category description to display an image in the Left Hand Corner. But when I do this the images for the sub-categories also shift over. How do I stop that from happening? I know it has to be simple....

Thanks in advance.

[Nimbuz]

Floats have to be cleared ofcourse.

Add this to the DIV which contains the image you're floating:

overflow:hidden; width:100%;

[Nimbuz]

Well, just add this to your CSS and all should be fine:

#categoryDescription {
overflow:hidden;
width:100%;
}

[quentinjs]

Beautiful, worked fantasticly, the odds of me stumbling upon that is almost nil.

So what does this do?
overflow:hidden;
width:100%;

the width 100% I am assuming says take the entire containment space I'm entitled to. but te overflow is interesting.

[Nimbuz]

It clears floating objects in a container, without requising any markup.

overflow:hidden; does the trick, width is just an IE hack.