CSS float troubles Options

[George in TX]

I'm floating thumbnail images used as links and having trouble. The links are actually to .exe files which are jigsaw puzzles. My intention is to burn all the files to an autorun CD for my daughter for Christmas. Because of that I don't want to upload this to my server space.

The code validates to HTML 4.01 Strict and the CSS is valid as well. I had a margin of 1em on div.thumb. With IE6 image #4 wasn't really floated right but positioned on row #2 right under image #3 above. I changed the margin on div.thumb to 0.5em and the problem went away until I added more thumbnail images then it reappeared. After even more images were added the problem also appeared in Opera.

I added borders to #main and to div.thumb to see what was going on. In IE the main div encloses the thumbnail links which it should. All the code in body is contained in div id="main". The screenshot is of Opera and you can see the main div doesn't enclose the images. However the images are positioned as if it did.

Also in IE6 the font in the H1 is certainly not times new roman while it appears correct in Opera. Any help will be appreciated.

Here's the embedded CSS:

body, html {color: #000000;
background: #ffffaa;
}

#main {width: 80%;
margin: auto;
border: 1px solid green;
}

div.thumb {float: left;
margin: 0.5em;
width: 165px;
border: 1px solid red;
}

div.thumb p {margin:0;
padding:0;
text-align: center;
}

h1 {font-family: "times new roman", serif;
text-align: center;
font-size: 200%;
margin-bottom: 1em;
}

a:link, a:visited, a:hover, a:active
{text-decoration: none;
}

img {border:0;}

[Frederiek]

It would help more if you could upload a sample file, just with fake links, so we can see how you coded the html too.

In the meantime, maybe this article may help you out.

[stjepan]

So, burn Firefox on CD

[pandy]

With IE6 image #4 wasn't really floated right

I'd hope not since you only use left floats!

If you are doing what I think you're doing, that trick only works if all the floated boxes have the same height or they'll get caught on eachother.
http://realworldstyle.com/thumb_float.html

[George in TX]

With IE6 image #4 wasn't really floated right

I'd hope not since you only use left floats!

If you are doing what I think you're doing, that trick only works if all the floated boxes have the same height or they'll get caught on eachother.
http://realworldstyle.com/thumb_float.html

Pandy you tweaked just the right brain cells in me so I could get a handle on it. I had added a width to the div.thumb trying to stumble onto the problem. After your suggestion I also added a height and now everything flows as expected. Thanks to all for your help, it's appreciated.

[pandy]

Thanks to all for your help, it's appreciated.

You can thank me by providing a URL intead of a screen cap next time.

[Arwen]

With IE6 image #4 wasn't really floated right

I'd hope not since you only use left floats!

If you are doing what I think you're doing, that trick only works if all the floated boxes have the same height or they'll get caught on eachother.
http://realworldstyle.com/thumb_float.html

If that's the case, then simply making all the boxes the same height would fix it.