A row of floats in a fixed height container

How to make them look the same in all browsers

[thesheep]

I have a fixed height (not width) container, with a row of 4 thumbnails inside, each having their own div specified as float:left. I need a way to push the thumbnails down from the top and in from the sides of the container, as well as some separation between them.

I use left padding on the container and right margins on the thumbnail divs to give me the horizontal separation. Seems to work OK. I use top margin on the thumbnails to push them down from the top.

However, the problems seem to happen in IE5Mac.

(1) The thumbnail divs expand horizontally to fill the container width, and so become stacked vertically one after another. I think I fixed this by adding a width to the floating thumbnail divs. But because they have a border I'm a bit worried they may cause box model problems somewhere.

(2) Having done the above, it seems that the top margin on the floating divs doesn't do anything in IE5Mac, so the thumbnails are pushed up against the top of the container. I could add top padding to the container but this would cause me box model problems.

I'm thinking I could add an extra nested div with the padding but it seems inelegant. Any recommendations for this setup? Thanks.

[SuzyUK]

thesheep
IE5/mac does have it's own set of problems with floats

1. most certainly you need a width on floats, it is known to cause problems in some browsers especially IE5/Mac if you don't. New recs are that no width on a float will cause it to "shrinkwrap" which I think Opera supports already, but because of backwards compatibility it will be much more stable to continue to use widths for the forseeable future..

It would only cause box model problems if your float widths and their borders added up to more than the width of the container, but you say it hasn't got a fixed width so you should be alright..

2. not sure here but I think padding might be the only way.. what happens if you add 1px top/bottom padding to the div, does that make the float margins work? (I'm thinking collapsing margins, even though floated div margins are not supposed to collapse)

if the 1px padding trick works you could then just adjust the fixed height by 2px and if that 2px is important to the design, then yes you may need to feed in a different value for IE5.x/Win

if it doesn't you may have to use padding and adjust you fixed height accordingly (IE5.x/Win and IE6 Quirks will need the original value)

I don't Macs quirks so well, so while I'm pretty sure about no.1, no2 may not be any help..

Suzy