This is my 1st layout in CSS, after a long history with tables. I am beginning to get a hang of it, just a few problems.

The layout is supposed to be centered. The "right-slide" box is supposed to have a height of 100% so it would reach the bottom of the page. It works in Firefox, but in IE 6 the page is aligned to the left and the "right-slide" is not 100%.

HTML Code:
<html>
<head>
<title>Good Stuff</title>
<style type="text/css" media="screen">

body {
        background:#666666;    
        color: #FFFFCC;    
        font-family: palatino linotype;
        height: 100%;
        }


#outer{
    min-height: 100%;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    position:relative
}



#leftcontent, #right-slide, #centercontent {
    float:left;
    width:200px;
}

        
    #leftcontent {
        border:0px solid #000;
        width:200px;
        height:500px;
        }
        
    #right-slide {
        z-index: 0;
        width:160px;
        height: 100%;
        background:#cccccc;
        }
        


    #centercontent {
         width:610px;
        background:#666666;
           border:0px solid #000;

        }

    #top-intro {
        margin-left: 200px;
        width:700px;
        background:#666666;
        border:2px solid #000;
        }
        
</style>

</head>

<body>

<div id="outer">

<div id="leftcontent">
left content
<br>
</div>

<div id="top-intro">
header content
</div>

<p>

<div id="centercontent">
center content
</div>

<div id="right-slide">
rightcontent
</div>

</div>


</body>

</html>