I’m redesigning one of my sites, and I’ve run into a CSS/formatting problem in Firefox (it works as intended in IE—go figure).

The basic layout is like this:

Header 1

Thumbails

Header 2

More Thumbnails

But what’s happening is:

Header 1

Header 2 (in the background, ‘underneath’ the thumbs, as if it’s being rendered before the EE code is executed)

Thumbnails

More Thumbnails

This is my HTML/EE Code dumbed down a bit for readability:

This is the CSS that affects the H5 & thumbs classes:

Do you see anything that might be causing this behavior?

Try clearing your h5’s like this:

Be careful, though.  Clearing those might have unexpected consequences if this isn’t the only place you’re using them.

What’s happening here is that your thumbnails div is floated left, and the h5 and divs below that are trying to hang up there with the thumbnails div.

Let us know if that does or doesn’t work.

Try adding to .thumbs

width: 100%;
clear: both;

and to #blog h5

clear: both;

Dude, you’re awesome. Clearing fixed it—these are the only 2 places that I use those tags, so this appears to be a perfect solution.

Thanks a lot, I never would have found this on my own as I hadn’t heard of the clear parameter until now:)I appreciate you cleaning up my markup, too. That’s something I need to be more disciplined with.

Cleaning up will come to you in time

I actually didn’t start alphabetizing my css stuff until I got to my current job this past October.  Now, I don’t think I could do without it.  It just makes things a lot easier to follow.

soxhead - 14 May 2008 06:52 PM

Dude, you’re awesome. Clearing fixed it—these are the only 2 places that I use those tags, so this appears to be a perfect solution.

Thanks a lot, I never would have found this on my own as I hadn’t heard of the clear parameter until now:)I appreciate you cleaning up my markup, too. That’s something I need to be more disciplined with.

No problem, glad you got it sorted.

I’ve found you have to at least clear:both one thing if you float any container and want something immediately below it, even if that below container floats too.  And some browsers use clear: differently.