Log in

View Full Version : Expanding the Content area


ChrisWade
06-11-2007, 10:01 PM
Here is my 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>


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.

I do not want to use the overflow property because the client doesnt want an internal scrollbar.
dog
06-18-2007, 01:00 PM
Hi,

Just from taking a quick look at your code I see that every piece of information on your page is held inside a div with 'position: absolute'.

This isn't very good practice if you are looking for any kind of flexibility in your page.

Try redesigning your page without so much use of the Position Attribute.

Most elements (paragraphs, divs, lists, etc.) will grow and collapse based on the content inside them. If you don't define the height of an element it's height will be based on the content inside it.

I hope this helps,

Good luck,
dog