Hey there css magicians lol. I have tried my very best to get this done myself but I have come to a dead end. I am working on a site - http://www.djmixerpro.com and I want the body background black, main container white with a grey sidebar. Sounds simple enough but for some reason it will not let me make the sidebar height 100% dark grey (#333333) Or let me make the main container for the content all white? Even the product pages are not fully white - actually worse? I have created a mock up of what I am after which can be found attached can some one please help?
You need to make a container image, 1px in height x 100% width of your desired container, with the grey sidebar and the white background for your content. The CSS below should be self explanatory. The overflow:hidden and the height:1%; are set to correct for the issues with the floats. You can replace percentage widths with px or em, or whatever you'd like, and change the numbers of course. I just wanted to post a basic thing so you can learn from it. #container { width:100%; background:(images/container-bg.png) repeat-y; overflow:hidden; height:1%;} #content { width:75%; float:right; } #sidebar { width:25%; float:left; } <div id="container"> <div id="content"> content </div> <div id="sidebar"> sidebar stuff </div> </div> Code (markup):