Width property in div element no working correctly

HTML & CSS
1

Hello, built a simple html/css web site from AllinOne book. Checked code with W3 - fine. The column between left and right does not fill the screen eve though the width property is set to 100%.
Sample code is as follows:
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
margin-bottom: -2000px;
padding-bottom: 2000px;
}

#right_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
margin-right: -200px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}

#content_area {
position: relative;
float: left;
background-color: #ffffff;
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 100%;
}

div id=“wrapper”>
<div id=“content_area”>CONTENT</div>
<div id=“left_side”>LEFT SIDE</div>
<div id=“right_side”>RIGHT SIDE</div>
</div>

thanks for your help in advance.

2

welcome to Sitepoint AoW,

first off you need to offset the container element so as to accommodate the left column ( we do this by giving it padding-left the same width of the left column. in this case we dont really need position relative, so I took that out ( and left:Xpx; also). I didnt know if you wanted 100% height or not… if you dont just remove the min-height:100% of off the wrapper and and ignore the body,html rules.


		body, html{height:100%;padding:0; margin: 0;}
		
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
margin-left: -100%;
 margin-bottom: -2000px;
padding-bottom: 2000px;
}

#right_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
margin-right: -200px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}

#content_area {
position: relative;
float: left;
background-color: #ffffff;
margin-right: -200px;
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 100%;
}	
#wrapper{padding-left:200px; overflow: hidden; min-height: 100%}

hope that helps