Container contents spilling over table cell

Holly Hack not working either

[NightDragon]

I'm not entirely sure what's going on, here...I've tried about every "fix" I could think of, including the Holly Hack and "DrDoc's" fix [webmasterworld.com] but apparently this isn't making a difference.

I initially had iframes on my site, but these were later scrapped, so I'm not sure if I've got some superfluous stuff swimming around my CSS file. It doesn't appear to be so, but I'm not sure if any of that could be causing the problem. The problem didn't seem to exist when I had the iframes up, so maybe when I was cleaning up the CSS I took something out that was necessary for the positioning.

What the code is supposed to do is create a new line of floating thumbnails if the number of thumbnails on one line exceeds the dimensions of the housing table cell....which the code does, in all browsers except IE. In IE, the container extends to fit the thumbnails, and trails outside the table cell.

Here is the relevent coding:

HTML

<div class="container">
<div class="pic"><a href="/img/AdirondackWaterfall.html" target="_blank"><img src="/img/thAdirondackWaterfall.jpg"></a></div>
<div class="pic"><a href="/img/Ship.html" target="_blank"><img src="/img/thShip.jpg"></a></div>
<div class="pic"><a href="/img/Sonic.html" target="_blank"><img src="/img/thSonic.jpg"></a></div>
<div class="pic"><a href="/img/Mega.html" target="_blank"><img src="/img/thMega.jpg"></a></div></div>
<br>

(etc etc)

CSS

body {margin: 0px;
font-size: 8pt;
font-family: "verdana", "arial", "helvetica";
line-height: 16pt;
 color: #669999; 
text-align: left;
background-image: url(BG.gif');
 background-repeat: repeat;}

img { display: block;}

div.container {
 margin: 0px 0px 0px 13px;
 padding: 0px;
align: left;
position: relative;}

div.pic { 
 float: left;
 clear: right; 
 border: 0px; 
 margin: 7px;
 padding: 0px;}

.container:after { 
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; }
 

/* Hides from IE-mac \*/ 
* html .container {height: 1%;} 
/* End hide from IE-mac */

table.mine {
width: 555px;
border: 0pt;
border-spacing: 0pt;
padding: 0px;}

Any suggestions or tips would be much appreciated! Thank you. :)

[edited by: SuzyUK at 6:12 am (utc) on Jan. 26, 2007]
[edit reason] please no URI's or image links thnks [/edit]

[iseem]

Try setting a width on .container

[NightDragon]

"Try setting a width on .container "

...I did - the floats still spilled over. :(

[SuzyUK]

Hi NightDragon

remove clear: right from the pic div, it should only apply to right floated elements anyway and is not necessary for the code, it seems IE is applying it to the top border edge?

9.5.2 Controlling flow next to floats: the 'clear' property [w3.org]

Suzy