Image gallery, nested DIVs, floats, weird margins

I've searched past threads looking for something similar to what I'm doing, and I've found a few, but they don't quite address the weird problem I'm having. I've got a page of thumbnails, and I've got each one in a DIV that's floated left (along with its caption). There's also JavaScript so that when you click a thumbnail a window pops up with the large image. This is my stylesheet (the important stuff, anyway):

body {margin:0; padding:0;}
DIV.links {position:absolute; top:100px; left:50px;}
BODY>DIV.links {position:fixed;}
.container {margin-left:320px;}
.body {border: thick solid red; margin:15px; padding:10px}
.floo {float:left; width:20%; margin:1%; padding:1%; text-align:center;}
.clear {clear:both; margin:0;}

The HTML is like so:

<BODY>
<DIV CLASS="links">Navbar here.</DIV>
<DIV CLASS="container">
<DIV CLASS="header">Header here.</DIV>
<DIV CLASS="body">
<P>Blah blah blah.
<DIV CLASS="floo"><A href="xyz" [[JavaScript here.]]><IMG SRC="xyz"></A><BR>Caption.</DIV>
<DIV CLASS="floo"><A href="xyz" [[JavaScript here.]]><IMG SRC="xyz"></A><BR>Caption.</DIV>
<DIV CLASS="floo"><A href="xyz" [[JavaScript here.]]><IMG SRC="xyz"></A><BR>Caption.</DIV>
[And so on, a pageful of DIVs.]
<P class="clear">Clearing paragraph.
</DIV></DIV></BODY>

This looks right in Mozilla, of course, but IE is being screwy as usual and I'm hoping someone can tell me a way to hack it back into shape. It's supposed to look like this (sorry about all the periods, the pre tag seems to ignore a lot of spaces):


Ś--------------------------------Ś 
Ś .... Ś ........header......... Ś 
Ś .... Ś ._____________________. Ś 
Ś link Ś Ś Blah blah.......... Ś Ś 
Ś link Ś Ś .__. .__. .__. .__. Ś Ś 
Ś .... Ś Ś Ś__Ś Ś__Ś Ś__Ś Ś__Ś Ś Ś 
Ś .... Ś Ś cap. cap. cap. cap. Ś Ś 
Ś .... Ś Ś .__. .__. .__. .__. Ś Ś 
Ś .... Ś Ś Ś__Ś Ś__Ś Ś__Ś Ś__Ś Ś Ś 
Ś .... Ś Ś cap. cap. cap. cap. Ś Ś 
Ś .... Ś Ś Clearing paragraph. Ś Ś 
Ś .... Ś Ś_____________________Ś Ś 
Ś .... Ś ....................... Ś 
Ś .... Ś ....................... Ś 
Ś--------------------------------Ś

In IE6, the whole block of thumbnails is shifted slightly to the right, so it's slightly indented on the left and slightly overlapping the border of the "body" DIV on the right hand side of the page. It's very noticeable if you add a colored border to the "floo" (thumbnail) class in the stylesheet. Is there any way to fix this in IE without breaking it in Mozilla? I'd like to keep the same basic style if possible, so that if the window's resized, the thumbnails just shift down (to three columns or two or whatever).

Image gallery, nested DIVs, floats, weird margins

DIVs edging outside of parent DIV (in IE)

Ernos

yowza

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week