IE7 width and min-width bug

29th January 2008 by Jason C. Filed under: CSS

After a day of plenty of swearing, I seem to have found something out that I think I should have known about before. I’m posting in the hope it will help out some other hapless web developer and prevent some nasty monitor-forehead interfacing.

For some reason, I know not why, after making a small change to an html page, IE7 stopped picking up some percentage widths (for floated elements). After a lot of swearing, I found out that sometimes, to even pick up a width, IE7 needs both a min-width and width. As I was using percentages that was not a hassle – so for example the rule

float:left; width: 25.5%;

was having no effect: the width of the element was shrinking down to the width of its content, while on IE6, Opera, Safari and Firefox everything was fine. Adding a min-width thus

float:left; width:25.5%; min-width:25.5%;

Sorted everything out. So now everything’s hunky dory. I’m sure most of you will have known about this and I’m quite surprised I haven’t come across it before. That’s part of the joy of the job, I suppose: after the frustration comes the satisfaction of learning something new and solving a problem.