This is my second attempt at creating my very first fully css webpage. I have it setup, but I can't seem to get the main content to stretch the height of the page properly. I'm hoping somebody can point out what it is I'm doing wrong here and what I can change to get the page to stretch correctly.
http://www.cbledindustries.com
Code:
body {font:75% Verdana, Arial, Helvetica, sans-serif;background:#FFFFFF;margin:0;padding:0;text-align:center;color:#000000;}
#wrapper {width:100%;}
#dropshadow {z-index:2;margin:0 auto;width:955px;background:url(images/dropshadow_bg.png);background-repeat:repeat-y;}
#content {position:relative;z-index:3;margin:0 auto;width:923px; background-color:#FFF}
#greenbreak {z-index:-2;position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}
#header {position:relative;height:303px; width:923px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#header-images {position:absolute;left:407px;top:35px;width:454px;height:103px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:-409px;width:366px;height:409px;z-index:-10;}
#navbar {position:relative;width:233px;height:350px;z-index:10;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-navlink {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-compinfo {float:left;margin-top:25px;width:90%;text-align:right;z-index:1;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}
#pagecontent {margin-left:233px;margin-top:5px;width:650px;min-height:320px;background:url(images/navbreak_bg.gif);background-repeat:repeat-y;padding:10px;}
#pageheadline {position:absolute;top:-42px;width:650px;height:10px;font-size:250%;font-weight:bold;font-style:italic;color:#333;}
#footer {margin:0 auto;width:923px;}
#footer_maincell {background-color:#329428;font-size:80%;color:#CCC;height:56px;line-height:25px;width:750px;}
#footer_maincell a {color:#FFF; text-decoration:none;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="dropshadow">
<div id="content">
<div id="header">
<div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
<div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
<div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
<div id="header-images"><img src="images/header_images.jpg" width="454" height="103" /></div>
<div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
<div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
<div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
</div>
<div id="navbar">
<div id="navbar-home"><a href="index.html">home </a></div>
<div id="navbar-navlink"><a href="info.html">company info </a></div>
<div id="navbar-navlink"><a href="product.html">products </a></div>
<div id="navbar-navlink"><a href="contact.html">contact us </a></div>
<div id="navbar-navlink"><a href="legal.html">legal disclaimer </a></div>
<div id="navbar-compinfo">
<span style="font-size:125%;">USGCB Company</span><br /><br />
<strong>CB LED Industries</strong><br />
6278 N. Federal Hwy.<br />
Suite 423<br />
Fort Lauderdale, FL 33308<br /><br />
<em>305.915.2600</em><br />
Fax <em>954.941.1973</em>
</div>
<div id="pagecontent" align="justify">
<div id="pageheadline">WELCOME TO CB LED INDUSTRIES</div>
<p>Lorem ipsum etc
</div>
</div> <!-- content -->
<div id="footer" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="images/footer_left.gif" width="18" height="56" alt="">
</td>
<td><div id="footer_maincell" align="center">
<a href="index.html">HOME</a> | <a href="info.html">COMPANY INFO</a> | <a href="product.html">PRODUCTS</a> | <a href="contact.html">CONTACT US</a> | <a href="legal.html">LEGAL DISCLAIMER</a><br />All content is copyright of <a href="http://www.cbledindustries.com">CB LED Industries</a> © 2009 | Website built by <a href="http://www.crackin.com">Crackin Studios</a></div>
</td>
<td>
<img src="images/footer_right.gif" width="18" height="56" alt="">
</td></tr>
</table>
</div>
<!--<div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>-->
</div> <!-- dropshadow -->
<div id="greenbreak"></div>
</div> <!-- Wrapper -->
</body>
Any and all help is much appreciated. |
