Content breaks when I minimize in IE6

Question

I know that IE6 is obsolete but my customer still uses IE6.
This project's content segment must be a percentage scale, but when the content's height is very long and user decides to minimize the browser, the content segment jumps to the bottom of side bar.

My code when dashboard_content with longer content

CSS code:

#outer-box {
    width:100%;
    height: 100%;
    position: relative;
    overflow: auto;
    float: right;
}

#inner-box-1 {
    width: 225px;
    height: 100%;
    background-color:#253740;
    float:right;
}

#inner-box-2 {
   height: 100%;
   direction: rtl;
   overflow:auto;
   *overflow: inherit;
}

.header {
    width: 100%;
    height: 100px;
    background: url('imgs/pattern.jpg') repeat-x;
}

.dashboard_main_menu_holder {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
}

.dashboard_content {
    width: 98%;
    margin: 10px;
}

HTML code:

<div id ="outer-box">
    <div id="inner-box-1">
        <div class="user_image"></div>
        </div>

    <div id="inner-box-2">
        <div class="header"></div>
        <div class="dashboard_main_menu_holder"></div>
        <div class="dashboard_content"></div>
    </div>
</div>

How can i get this fixed in IE6?

Answer 1

Change the %s on the CSS to the amount of px. You can find more information on this link.