How do I get around the IE CSS percentage rounding

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

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.

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 had the same problem. ie7 did not render 33.33% correctly. It would work with 33% but then it was a hairline off. I used the advice from the second block of code in the first response above, plus a little ie hack. It worked for me, I hope it helps.

.all-boxes {
   width: 33.33%;
   float: left;
   display: inline;
   *margin-right: -1px; /* Add the asterisk */
 }

The margin value might need to change based on your implementation, but 1px worked for me.

Answer 4

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.