css float problem

i have a page of product categories, where each category image sits in a left floated div, so that i can fit 3 to a line, giving a grid like effect.

i want some text to sit beneath each set of images, which varies depending on the number of items in each category.

where i have 3, 6 or 9 images, no problem, the grid is filled, the text sits underneath, however if I have 4 or 7 images, the text sits alongside.

i have tried adding a clearboth break below the 'grid', but this forces the text to below the content of the left sidebar.

eg category.php?CategoryID=1

looks ok

category.php?CategoryID=14 has a big gap because of the sidebar.

Have you tried wrapping the element above it in a div and then using clear:right; instead of both ?

Jamie

Hi Jamie.

Yeah, i tried that, i put all the repeating elements within their own div, tried clearing right only, even put the text in a div with a fixed width and it still won't behave itself

I'm not sure if this is what you're tying to accomplish, but removing the { clear: left; } property on the id named #clearFloat removes the large gap.

thanks for looking Mikey.

It does,.. but if you do the same to the summerhouse page, (category1) the text sits alongside the image box, and i want it to sit beneath

Gotcha. I see what you mean. Have you tried adding a class to the div that's wrapping the h1 and paragraph and { float: left;} the div?

Remove the { clear: left; } property on the id named #clearFloat then added a { float: left; } property to the div wrapping the h1 and paragraph. If you add a class to the h1 and { float: left; } as well, it starts to put the paragraph into position. Getting the paragraph to then cooperate and drop below the h1 is the next challenge.

Just tried it in Web Inspector and I think its starting to work. Sorry if my persistence becomes annoying.

Your persistence is gratefully received!

I removed the clear:left property and added a class to the div around the text.

floating left on its own doesn't quite do it, but setting a width moves it down as required.

only thing is, the paragraph text is cut off unless I also set a div height.

Don't know why that is , but its getting a lot closer.

Cheers

Yes, that paragraph is being finicky! Best of luck finishing it up... glad to lend a hand.

cheers, much appreciated