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

css, css-float, internet-explorer, width

Solution

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.

Problem

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)

Original source