Italics cause DIV width problem

Internet Explorer 6 has a problem where it fails to calculate the width of DIVs containing italic text correctly. You’ll generally notice this problem in a 2-column CSS layout. Your fancy new layout looks great, until you add italic text. Suddenly your menu appears below your content or vice-versa.

The solution? Sometimes there is none (other than use Firefox instead of IE ;) ). However this little trick will work most of the time: Add the following to your content DIV that contains the italic text:

overflow: visible;
width: 600px // or whatever width you like.. but you MUST specify a width for this trick to work

And that’s it! Hopefully this will save you from hours of pulling your hair out 8)

Leave a Reply