Margins getting applied to floats
Try this page in Firefox. You’ll see the red box is nicely snug against the blue box. Now try it in IE or Opera. What’s all that extra space? Apparently, the margin from the yellow box is getting applied to the bottom of the float! What’s weirder is that if you increase that margin just a little bit (such that it would extend below the float anyway), the red box pops back up to where it should be.
Now, I tried to find references to this online, but all I could find was this post by Andy Budd to css-discuss.
I guess I’ll just have to work around it and use padding instead of margin.
I hate these stupid bugs.
December 3rd, 2004 at 11:29 pm
I actually had a similar problem just yesterday when I was working with multiple floats. I had basically some labels for boxes in one row, the boxes in the next row, and then more labels below the boxes.
For some weird reason, there was a big gap between the top row of labels and the boxes, but no such gap between the boxes and the bottom row…and it was definitely caused by the floats. I couldn’t figure it out either, so I just did the CSS a different way that didn’t require the floats (it wasn’t exactly what I wanted, but it worked consistently across all browsers).