Question

I have problem positioning left sidebar (variating height DIV) ON IE6.

Main needs:
1. I cant set height value, cause height is variating and should be computed by browser.
2. Sidebar must have top and bottom spacings.

Top bar issue is solved by replacing position to relative.

Any ideas ? Thank you in advance !

Below you can see simplified code and snapshot how it looks on standard browsers.

.container {
    left: 550px; 
    top: 10px; 
    width: 196px; 
    position: absolute; 
    line-height: 0px; 
    font-size: 1px;
}
.inner {
    width: 100%; 
    height: 114px; 
    background-color: rgb(227, 227, 227);
}
.leftbar {
    left: 0px; 
    top: 7px; 
    bottom: 7px; 
    width: 4px; 
    position: absolute;
    background-color: rgb(111, 111, 111); 
}
.topbar {
    left: 7px; 
    top: 0px; 
    right: 7px; 
    height: 4px; 
    position: absolute;
    background-color: rgb(111, 111, 111); 
}

<div class="container">
    <div class="inner"></div>
    <div class="leftbar"></div>
    <div class="topbar"></div>
</div>

LINK TO SCREEN SHOT IMAGE

Answer 1

IE6 is tremendously bad when it comes to absolute positioning. Positioning something at the same time from left and right or from top and bottom just doesn’t work.

You basically have four options:

1. Drop support for IE6.
2. Give up on absolute positioning and use some other method (floats for example).
3. Provide dumbed down version of the site for IE6 – for example overriding some styles using conditional comments.
4. Use JavaScript to aid IE6 in positioning (for example absolutefudge.js).