Question

There seems to be a bug in firefox where if I put anything on the right edge of a container (using text-align or float) it makes the container larger than it should be.

So for example –

<div style='width:100px; overflow:auto'>
    <div style='width:50px; float:left;'>Something</div>

    <div style='width:50px; float:right;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

Creates a scroll bar in firefox, seems to work fine in chrome. Any ideas?

Answer 1

What you’re seeing is that the text actually overflows its container, because the painted dimensions of text can be bigger than its layout dimensions. This is particularly visible with italic text, but can happen with any text, especially with subpixel layout and antialiasing.

Chrome doesn’t do subpixel layout of any sort, so it’s just ignoring the overflowing text.

Your simplest bet is to just style your right float as overflow:hidden.