ben_dbs

Tableless is the shizzle... much much simpler once you get the knack.

also... take off position absolute on sidebar2

hmmm.. I think it's down to the 'sidebar2' section being positioned 'absolute'... taking that off extends the background colour. When i do designs of this nature I tend to float all the elements in the container div - float:left; Then I 'clear:both;' the footer to make the background adhere. So if you want to use this method you'll have to set a width on your divs inside the container & float them left in the css. You would also need to move the 'sidebar2' div after 'mainContent' in the html to make it display properly... then clear:both; the footer. Hope this helps...??? css---------------------------------------------------------------------------------------------------------------------> add - float:left; to - 'sidebar1', 'mainContent' (you will need to add the correct width on this), 'sidebar2' add - clear:both; to - 'footer' html (swap sidebar2 & mainContent around)-------------------------------------------------------------------------------> <div id="container"> <div id="header"><!-- end #header --> <div align="center"><img src="images/images3/title" alt="bike comp" width="731" height="144" /></div> </div> <div id="sidebar1"> <p><a href="../comp2.html">Info ></a></p> <p><a href="photo-comp-Subbmissions.html">Submissions ></a></p> <p><a href="photo-comp-rlues.html">Rules ></a></p> <p><a href="photo-comp-forms.html">Forms ></a></p> <p><a href="photo-comp-copyright.html">Copyright ></a></p> <p><a href="photo-comp-galleries.html">Galleries ></a></p> <p>Portfolio ></p> <p><a href="photo-comp-Events.html">Events ></a></p> <p><a href="../index.html">Photofinale></a></p> <p> </p> <p> </p> <!-- end #sidebar1 --></div> <div id="mainContent"> <h1>Portfolio</h1> <div class="fltlft"></div> <div class="fltlft"> <p><a href="../past_1/index.htm" target="_blank"><img src="images/past.jpg" alt="past" width="125" height="100" border="0" /></a></p> <p><a href="../past_1/index.htm" target="_blank">Past 1</a></p> </div> <p> </p> <p> </p> <p> </p> <h2> </h2> <p> </p> <p> <!-- end #mainContent --> </p> </div> <div id="sidebar2"> sponserd by <p align="center"><a href="http://www.leicester.gov.uk/index.asp?pgid=7010" target="_blank"><img src="images/images3/cyclecitylogo.gif" alt="cycle city" width="149" height="75" border="0" /></a></p> <p align="center"><a href="http://www.leicester.gov.uk/index.asp?pgid=7010"><img src="images/images3/EndLCC.gif" alt="lcc" width="52" height="75" border="0" /></a></p> <p align="center"><a href="http://www.thin-kingmedia.co.uk/" target="_blank"><img src="images/images3/tkpink.gif" alt="thin-king media" width="110" height="75" border="0" /></a></p> <p align="center"><a href="http://www.leicester.gov.uk/your-council--services/transport--traffic/transport-development/sustainable-team-homepage/cycling-in-leicester/ride-leicester-2008" target="_blank"><img src="images/images3/ride_leicestee-pink.gif" alt="rideleicester" width="199" height="75" border="0" /></a><br /> <!-- end #sidebar2 --> </p> </div> <div id="footer"> <p>web site by thin-king media</p> <!-- end #footer --></div> <!-- end #container --></div>

This should work... before the end of the closing tag of the div that has the background styled, add another div with class="spacer" then add this to your css... div.spacer { clear:both; } Shoot me if it doesn't work...