IE 7 element popping sort of under another

[swtch]

OK, I have a sidebar listed first in my HTML and have it floated left with CSS. I have a middle section set at 56% width, and left and right margins of that element at 22% each.

The problem is that in IE 7, at certain browser widths (window widths), the middle section pops down; both the sidebar and middle are in the right place otherwise... it looks like it's floating, but just not adjacently. You can see it pop up and down if you resize your window (IE, that is... Firefox and WebKit are fine).

Here is the website I'm working on and here is my CSS.

Any ideas on what's wrong/happening/how to fix it?

[Fang]

Rounding errors. By using 'auto' the browser will center #middle according to the rest value (100%-56%) rather than calculating how many pixels there are in 22%.

#sidebar {
  position:absolute;
  left:0;
  padding: 0.5% 0 0 0.5%;
  font-size: 13pt;
}
#middle {
  margin: auto;
  background-color: #333;
  color: #fff;
  text-align: center;
  min-width: 249px;
  font-size: 14pt;
  width: 56%;
}

Units 'pt' are for print, not for screen: http://www.w3.org/QA/Tips/font-size

[swtch]

Well, actually, I had the margins at auto before, but then it actually doesn't center in IE. That's why I changed it to 22% each side. Sigh...

Units 'pt' are for print, not for screen: http://www.w3.org/QA/Tips/font-size

Thanks, I should fix that. It was originally in Word, but I recoded it but kept that font specification.

Also, read some good stuff about fonts over at the Engineering Windows 7 blog recently, if anyone wants to look at it.

[Fang]

Centers in all IE browsers: http://www.webdeveloper.com/forum/sh...57&postcount=2

[swtch]

Alright, thanks, Fang. I wasn't familiar with the position property. Tried your code and then later looked up the property. Rep + if the forum had them.