Help with CSS alignment in IE7

[jamarwright]

CSS Ninjas:

I'm designing a website for a friend of mine. I ran into a snag that I can't quite figure out. If anyone could help me out, I'd be most appreciative.

the url: http://www.sc-midwives.org

the intended result comes out like the 2nd pic in Firefox and Safari

the IE result as tested in IE7 is coming out like the 1st pic. **note the left side bar isn't floating left**

Here is my suspect CSS code:
-----------------------------------
.twoColFixLt #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */

max-height: length;
background: #320644;
-moz-border-radius: 5px; /* This rounds the corners of the sidebar in Firefox */
-webkit-border-radius: 5px; /* This rounds the corners of the sidbebar in Safari */
color: #FFF;
left: auto;
position: fixed;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
min-height: 100%;
--------------------------------

any ideas on how I can get that purple sidebar to align and float to the left in IE?

 

[angelwatt]

My guess would be this line:

position: fixed;

IE treats it as static rather than fixed. Quirks Mode. (Additional reading)

 

[jamarwright]

i'm pretty sure you're right. i did some additional reading on it this morning. IE doesnt know what to make of it. I found what looks to be a solution here:

http://www.howtocreate.co.uk/fixedPosition.html

I'm going to try it out as soon as I get near a machine that has explorer. I'll let ya know if it helps...