Content area dropping below sidebar in IE6

[pixelfreaks]

Hello,
I am having a problem in aligning the sidebar and content area in a webpage.
I am using css.
Consider the below layout.

  __________________________________________ 
  |                       header                                       |
  |_________________________________________|
  |                      |                                                 |
  |                      |                                                 |
  |      sidebar      |                content                      |
  |                      |                                                 |
  |                      |____________________________|
  |                      |             footer                            |
  |____________ |____________________________|

I am stuck at two places. The css/html code works fine in Firefox but
is wrong in IE6.

a) Given the above structure, i need only the content area to scroll
when I move the scroll bar of the explorer window.
This is happening in firefox but not in IE 6.

b) Also the content area is dropping below the sidebar. So its like the sidebar
is coming first, and then the content.
And the sidebar is spanning the entire horizontal of the page.
In sidebar each item is of class mitem.

I use div to create the areas. Also use a series of mitem inside sidebar.
Problem is the
"Content is dropping below sidebar" and
"Instead of only contenr being scrolled, the whole page is scrolling".
(Scrolling to be controlled by IE window scrollbar)

I checked out the box problem bug , but unable to solve my problem.
I am posting relevant code below.
Please help. many thanks in advance. I need the help most urgently.

(In Firefox everything is working fine but not in IE6)

html {
  margin:     0;
  overflow:   auto;
}
 
body {
  padding:      0 0 0 0;
  font-size:    medium;
  text-align:   justify;
  overflow:     hidden;
}
 
 
.header {
  position:      fixed;
  top:           0pt;
  right:         1pt;
  bottom:        82%;
  left:          1pt;
  border:        none;
  display:       block;
  z-index:       2;
}
 
 
.content {
  position:      relative;
  float   :      left;
  overflow:      auto;
  margin-top:    0%;
  right:         1pt;
  bottom:        5%;
  left:          20%;
  padding:       1ex 1ex 1ex 1ex;
  width:         78%;
  height:        auto;
  display:       block;
  z-index:       1;
}
 
 
 
.footer { 
  position:      fixed;
  clear   :      both;
  top:           95%;
  right:         1pt;
  bottom:        0pt;
  left:          0%;
  left:          20%;
  border:        none;
  font-size:     smaller;
  display:       block;
  z-index:       2;
}
 
 
.sidebar { 
  position:      fixed;
  float   :      left;
  margin-top:    2em;
  top:           18%;
  right:         80%;
  bottom:        5%;
  left:          1pt;
  border:        none;
  font-size:     small;
  display:       block;
  z-index:       2;
}
 
 
.mitem {
  text-align:    left;
  margin-left:   1pt;
  margin-right:  80%;
  padding-left:  0em;
  border-bottom: thin solid;
  font-size:     large;
}
 
.heading {
   font-weight:  bold; 
   font-style:   italic; 
   width:        99%; 
   text-align:   left; 
   border:       0;
   padding:      2px 2px 2px 2px;
}
 

Please help.
Regards
pixelfreaks.

[David Laakso]

position: fixed; is not supported in IE/6 and down.

Google, subject line: position:fixed
for various work around solutions for IE/6.
This may not be easy to pull off if you are an inexperienced CSS coder.