Problem in simple 3 column layout

[arvindikchari]

Hello

I am using a 3 column layout for which the css is as below

mysbody {
margin:0;
padding:0;
background:#cecece;
}
#wrap {
width:1024px;
margin:0 auto;
background:#fff;
}
#header {
width:1024px;
height:200px;
}
#left {
width:200px;
float:left;
}

#leftbarheader {
width:160px; height:20px; padding-top:7px;
 
}

#leftbarheader2 {
width:160px; height:20px; padding-top:7px;
 
}

#leftbarheader3 {
width:160px; height:20px; padding-top:7px;
 
}


#leftbar {
width:160px;
float:left;
}

#leftbar2 {
width:160px;
float:left;
}

#leftbar3 {
width:160px;
float:left;
}



#middle {
width:610px;
float:left;
}
#right {
width:160px;
float:left;
}

#rightbarheader {
width:160px; height:20px; padding-top:7px;
 
}

#rightbarheader2 {
width:160px; height:20px; padding-top:7px;
 
}

#rightbarheader3 {
width:160px; height:20px; padding-top:7px;
 
}


#rightbar {
width:160px;
float:left;
}

#rightbar2 {
width:160px;
float:left;
}

#rightbar3 {
width:160px;
float:left;
}



#footer {
width:1024px;
height:30px;
}
.clear {
clear:both;
}

BAsically, there is a section where user can change the bg color for the entire page, and this changes the background of the page, ie of the div named 'wrap;. But in actuality, only the bg color for the top portion (corresponding to the header) is being changed

Given below is the code which uses the CSS above:

<div id="mysbody">
      			<div id="wrap">
					<font color="#000000">	<div id="header">



												  		      header stuff
						</div>



						<div id="left">



									            		<div id="leftbar">
							                              <div id="leftbarheader">Title 1 </div>
							                              <a href="link.html">example link</a><br />
							                              <a href="link.html">example link</a><br />
							                              <a href="link.html">example link</a><br />
							                              <a href="link.html">example link</a><br />
							                           </div>
									            		<div id="leftbar2">
									                	      <div id="leftbarheader2">  Title 2 </div>

												  			      <a href="link.html">example link</a><br />
												  			      <a href="link.html">example link</a><br />
												  			      <a href="link.html">example link</a><br />
												  			      <a href="link.html">example link</a><br />

													    </div>

														<div id="leftbar3">

									                		   <div id="leftbarheader3">  Title 3 </div>

												  	    		  <a href="link.html">example link</a><br />
												  	    		  <a href="link.html">example link</a><br />
												  	    		  <a href="link.html">example link</a><br />
												  	    		  <a href="link.html">example link</a><br />


											  	        </div>
						 </div>


						<div id="middle">
												  	      This is fake text to give the impression of an average size paragraph which would appear in a normal web page. This text should be replaced with real paragraphs in a normal web page. This is fake text to give the impression of an average size paragraph which would appear in a normal web page. This text should be replaced with real paragraphs in a normal web page.
						</div>
						<div id="right">
									                    <div id="rightbar">

													    	<div id="rightbarheader">  Title 1 </div>

												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	   <a href="link.html">example link</a><br />
													    </div>

									                    <div id="rightbar2">


									                       <div id="rightbarheader2">  Title 2 </div>

												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	   <a href="link.html">example link</a><br />


													    </div>

									                    <div id="rightbar3">

									                       <div id="rightbarheader3">  Title 3 </div>

												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	    <a href="link.html">example link</a><br />
												  	    	   <a href="link.html">example link</a><br />

											  	  	    </div>
						</div>
								</font>

						</div>
  				</div>

Someone can please tell me what is wrong in the code
Thanks

Regards
Arvind

[scottloway]

I'm not totally clear on the issue, but I suspect you are expecting the modified background color to affect the entire wrap container; if that's the case, I would add overflow: hidden; to your #wrap selector:

#wrap {
     overflow: hidden;
}

I also noticed that the first line in your CSS is attempting to select "mysbody", which isn't a page element, but a div ID - my guess is your copy/paste just missed the preceding "#"...

Also as another aside, you might want to consider removing your <font> tag immediately after your wrap div; a better approach would be to utilize CSS for this - additionally, #000 is your default text color anyway.

[arvindikchari]

Hello scottloway,

Thanks for your answer, I was expecting the modified background color to affect the entire wrap container; now with your code it works perfectly

Regards
Arvind