Expanding the Content area
Here is my code
Now my question is, how can i keep the positions of the bottom divs below the content area relative to the layout yet expand the content area when I am increased content.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Da Les Auto Body</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="top" style="position: absolute; left: 0px; top: 0px; width: 1000px; height: 18px;" z-index: 1"><img src="images/top.jpg" alt="" width="1000" height="18"></div> <div id="lefttop" style="position: absolute; left: 0px; top: 18px; width: 52px; height: 400px; z-index: 2; vertical-align: middle"><img src="images/lefttop.jpg" alt="" width="52" height="400"></div> <div id="logo" style="position: absolute; left: 52px; top: 18px; width: 898px; height: 97px; z-index: 3"><img src="images/logo.jpg" width="898" height="97" alt="Da Les Auto Body"></div> <div id="right" style="position: absolute; left: 950px; top: 18px; width: 50px; height: 1017px; z-index: 4; vertical-align: middle"><img src="images/right.jpg" alt="" width="50" height="1017"></div> <div id="Layer5" style="position: absolute; left: 52px; top: 115px; width: 601px; height: 3px; z-index: 5"><img src="images/dales-chris-03_05.jpg" width="601" height="3" alt=""></div> <div id="shop" style="position: absolute; left: 653px; top: 115px; width: 297px; height: 203px; z-index: 6; vertical-align: middle"><img src="images/shop.jpg" width="297" height="203" alt=""></div> <div id="flash" style="position: absolute; left: 52px; top: 118px; width: 601px; height: 300px; z-index: 7; vertical-align: middle"><img src="images/flash.jpg" width="601" height="300" alt=""></div> <div id="directions" style="position: absolute; left: 653px; top: 318px; width: 295px; height: 99px; z-index: 8"><a href="contact.html"><img src="images/directions.jpg" width="295" height="99" border="0" alt="Directions"></a></div> <div id="Layer9" style="position: absolute; left: 948px; top: 318px; width: 2px; height: 100px; z-index: 9; vertical-align: middle"><img src="images/dales-chris-03_09.jpg" width="2" height="100" alt=""></div> <div id="Layer10" style="position: absolute; left: 653px; top: 417px; width: 295px; height: 1px; z-index: 10"><img src="images/dales-chris-03_10.jpg" width="295" height="1" alt=""></div> <div id="leftbottom" style="position: absolute; left: 0px; top: 418px; width: 50px; height: 617px; z-index: 11; vertical-align: middle"><img src="images/leftbottom.jpg" width="50" height="617" alt=""></div> <div id="nav" style="position: absolute; left: 50px; top: 418px; width: 900px; height: 35px; z-index: 12"><img src="images/nav.jpg" alt="" width="900" height="35" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="3,6,65,22" href="index.html"> <area shape="rect" coords="214,22,215,23" href="#"> <area shape="rect" coords="79,7,220,24" href="repair.html"> <area shape="rect" coords="243,2,358,28" href="ourfacility.html"> <area shape="rect" coords="374,3,477,28" href="bodyshop.html"> <area shape="rect" coords="484,4,607,27" href="detailshop.html"> <area shape="rect" coords="615,-2,730,27" href="detailshop.html"> <area shape="rect" coords="735,2,811,25" href="faq.html"> <area shape="rect" coords="822,9,893,31" href="contact.html"> </map></div> <div id="Layer13" style="position: absolute; left: 50px; top: 453px; width: 2px; height: 365px; z-index: 13"><img src="images/dales-chris-03_13.jpg" width="2" height="365" alt=""></div> <!--Main Content Goes Here --> <div id="text" style="position: absolute; left: 52px; top: 453px; width: 898px; height: 365px; overflow: auto; z-index: 14; background-image: url(images/bg.gif); layer-background-image: url(images/bg.gif); border: 0px none #000000;"></div> <!--End of Main Content --> <div id="business" style="position: absolute; left: 50px; top: 818px; width: 898px; height: 100px; z-index: 15"><img src="images/business.jpg" width="898" height="100" alt=""></div> <div id="Layer16" style="position: absolute; left: 948px; top: 818px; width: 2px; height: 100px; z-index: 16"><img src="images/dales-chris-03_16.jpg" width="2" height="100" alt=""></div> <div id="footer" style="position: absolute; left: 50px; top: 918px; width: 900px; height: 62px; z-index: 17"><img src="images/footer.jpg" alt="" width="900" height="62" border="0" usemap="#Map2"> <map name="Map2"><area shape="rect" coords="49,11,117,35" href="index.html"> <area shape="rect" coords="125,7,264,36" href="repair.html"> <area shape="rect" coords="273,8,377,37" href="ourfacility.html"> <area shape="rect" coords="387,4,483,34" href="bodyshop.html"> <area shape="rect" coords="495,9,599,39" href="detailshop.html"> <area shape="rect" coords="610,10,705,38" href="paintshop.html"> <area shape="rect" coords="715,8,756,34" href="faq.html"> <area shape="rect" coords="765,8,846,31" href="contact.html"> <area shape="rect" coords="613,43,755,51" href="http://www.meridianwebdesign.com"> </map> </div> <div id="bottom" style="position: absolute; left: 50px; top: 980px; width: 900px; height: 55px; z-index: 18"><img src="images/bottom.jpg" width="900" height="55" alt=""></div> <div id="Layer19" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 1035px; z-index: 19"></div> </body> </html>
I do not want to use the overflow property because the client doesnt want an internal scrollbar.
CSS Codes
Reply With Quote
Bookmarks