IE size/width problem

[thesti]

hello,

i'm trying to design a web. in the header, i create an outer-div which consist of three inner-divs.

the html looks like this

        <div align="center" id="banner-header">
            <div id="left-column"></div>
            <div id="center-column">
                    <img src="images/iklan_1.png" alt="ads-down" width="748" height="107"   />
            </div>                
              <div id="right-column"></div>
 
        </div><!-- banner-header -->
 

and this is the css

#banner-header{
    width:100%;
    height:139px;
}
 
#banner-header #left-column{
    width:27px;
    height:139px;
    background:url(../images/left.png) no-repeat;
    float:left;
}
 
#banner-header #center-column{
    width:746px;
    height:139px;
    background:url(../images/center.png) repeat-x;
    float:left;
    behavior: none;
}
 
 
#banner-header #right-column{
    width:27px;
    height:139px;
    background:url(../images/right.png) no-repeat;
    float:right;
}
 

the css generally setting the size of each div and floats them.

it looks alright in Opera 9.60 and Firefox 3.0.14. but in IE 7, the #right-column div appears at right bellow of both of the inner div (#left and #center).

here's the screenshot (seems that you have to bring your mouse over to see it)

i've tried to resize all of the inner div size, it solves the problem in IE, but it creates a gap between the center and the right div in Opera and Firefox. Liquid size doesn't work either.

how to solve this problem?


Thank you.

[thesti]

Sorry, it's actually IE 6 not IE 7. i haven't tried it with IE 7