This is my first post here. I am trying to build my design in Dreamweave and I am running into a few walls. I attached a jpg of the layout I want to create. Here is the code for what I have so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML Layout using Div Elements TEST2</title></head><body> <!--<div id="container" style="max-width:1280px; min-width:800px; min-height:768px; max-height:1024px;">--><div id="container-header" style="width:100%; height:38; overflow:hidden; margin:0px; padding:0px;"><div id="header1" style="background-color:#72657E; height:38px; width:10%; float:left;"></div> <div id="header2" style="background-color:#B5ADC2; height:38px; width:20%; float:left;"></div> <div id="header3" style="background-color:#ABA3AE; height:38px; width:772px; float:left;"></div> <div id="header4" style="background-color:#B5ADC2; height:38px; width:5%; float:left;"></div></div><div id="container-main" style="width:100%; height:515px; overflow:hidden; margin:0px; padding:0px;"><div id="navigation" style="background-color:#5E5E5E; height:515px; width:10%; float:left;"></div> <div id="content" style="background-color:#FFFFFF; height:515px; width:20%;float:left;"></div><div id="image" style="background-color:#CCCCCC; height:515px; width:772px; float:left;"></div> <div id="right" style="background-color:#5E5E5E; height:515px; width:5%; float:left;"></div></div><div id="container-strip" style="width:100%; height:10px; overflow:hidden; margin:0px; padding:0px;"><div id="strip1" style="background-color:#72657E; height:10px; width:10%; float:left;"></div> <div id="strip2" style="background-color:#B5ADC2; height:10px; width:20%; float:left;"></div> <div id="strip3" style="background-color:#ABA3AE; height:10px; width:772px; float:left;"></div> <div id="strip4" style="background-color:#B5ADC2; height:10px; width:5%; float:left;"></div></div><div id="container-footer" style="width:100%; height:auto; overflow:hidden; margin:0px; padding:0px;"><div id="footer1" style="background-color:#A59EAD; height;50px; width:10%; float:left;"></div> <div id="footer2" style="background-color:#CDC8D5; height;50px; width:20%; float:left;"></div> <div id="footer3" style="background-color:#BCB5BE; height;50px; width:772px; float:left;"></div> <div id="footer4" style="background-color:#CDC8D5; height;50px; width:5%; float:left;"></div></div></div></body></html> If you view that in a browser, you should be able to see the problem. I need the colors to repeat and expand to the edges of the browser. Ideally, this would be a liquid layout. The white box is the text content and the grey box is an image. The navigation on the left would have a range to expand, min and max. The white text box would have a larger range, but the photo box would be set. Expansion of the vertical spaces would be needed also. Top bar would expand and the strip directly below the content would expand also. The code I have above is the farthest I have gotten without the layout falling apart. As you can see from the layout, there are two areas of content, so once I have the BG functioning properly, the rest of the site should be a breeze. I havent been able to find a good tutorial about this type of layout. Thanks for any help!-Ryan