------------------ original email (snipped) ------------------------------ > I've run into this problem a few times lately, and have yet to figure out > how to resolve it. Here is the test page: > > http://offlead.com/stuff/floattest/index.html
> Is there a way to clear the bottom of the thumbnail div without clearing the > bottom of the column div? ------------------------------------------------------------------------ -- ----------------- jennifer's reply when I asked for clarification -------- Still no fix, and I've had to scrap two different layouts (two different sites) because I couldn't figure out how to resolve this problem. In the first url, http://offlead.com/stuff/floattest/index.html, the H3 element and everything below it is supposed to be below the floated thumbnails and the first paragraph of text. Sometimes there is one thumb, sometimes two. Sometimes a short intro paragraph, sometimes a long one. Regardless of whether the intro is longer than the thumbs or vice versa (which is more usual), the H3 should be on a clean line, not wrapped up next to the thumbs. The index2.html page has it below it, but of course the clearing div also clears the floated left column, dropping the h3 and content below it all the way down the page. I need it just right under the thumbs. ------------------------------------------------------------------------ --- The problem with it dropping lies somewhere in the left column being floated, which I'm sure you already found out. :) When I delete all the content in the left column, doing a "clear: left;" on that <h3> works just fine. I came up with a few interesting things, and hopefully you can use them to find a solution. I'm really hoping someone else might be able to chime in with a real fix, since my findings are a bit pitiful. -- 1 -- One thing that worked for me in FF is to make both the column and content "display: table-cell". Add a "clear: left;" to your <h3> (or put it in a div and make that clear left [which is what I did]), and FF should be looking good. Opera 8 looks good on a 1024x768 screen, but the <h2> section drops below the pictures on an 800x600. I didn't look into it, but just FYI. Now for IE. Ugh. Obviously IE has no idea what table-cell is, so you still end up with the same problem you had originally. I wasn't sure how to fix this one. -- 2 -- Adding "overflow: hidden;" to #content brought that <h3> section right up there in FF, though the content's left gap space got a lot bigger. However, if you chop that out somehow it looks just how you wanted. Opera has some sort of problem with your page I think, because once again the <h2> part slides under the pictures on 800x600 *and* the pictures get cut off this time. Looks just peachy in 1024x768 though. IE... doesn't work. :-/ Sorry. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
