First time CSS, 3 column outside columns collapseable question

I am trying to set up a page that has a centered box of 800px fixed width. On either side of this I want two collapsable boxes that are not going to have content, just some sort of colored background at somepoint. My first attempt at this has failed miserably...any help would be appreciated greatly. Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">

*{
margin: 0;
padding: 0;
}

#wrapper{
margin: 0;
position: relative;
width: 100%;
height: 100%;
}

#maincontent{
width: 800px;
height: 100%;
position: relative;
top: 0;
margin-left:auto;
margin-right:auto;
border: 1px solid #ccc;
}

#columnone{
width: auto;
height: 100%;
background-color:#006699;
float:left;
margin-left:0;
margin-right:0;
}

#columntwo{
width: auto;
height: 100%;
background-color:#006699;
float:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="columnone">Left Column</div>
<div id="maincontent">Main Content</div>
<div id="columntwo">Right Column</div>
</div>
</body>
</html>

First time CSS, 3 column outside columns collapseable question

Edouble76

theguX

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week