How do I get around the IE CSS percentage rounding problem?

Question

I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width.

I've found an article about the problem here: CSS: Jumping columns
I've also found an example of the same problem here: Jumping columns example

Drag the window size to see the jumping in IE7 or earlier.

Anyone knows if it's possible to get around this? (without Javascript)

Answer 1

In a situation like this, I would tend to get round the problem using an IE-only stylesheet that fudges the values until they work. In this case, just set the widths to 33%, it won't be perfect but then that's just the nature of the web.

Answer 2

I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of float/width):

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

.container {
  width: 75%;
}

.box1 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
}

.box2 {
  overflow: hidden;
}

This works in most cases.

Failing that, I add a negative margin of several pixels to the last element instead.

.box2 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
  margin-right: -3px;
}

If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.

Answer 3

I think that a simple answer might be to not round at all, just create a final "spacer" element with a 1% width that shares the look of the 1/3rd elements. Even IE should be able to deal with a 33 + 33 + 33 + 1 rounding.