Allar

okay so i rewrote it trying to use less divs here is what i got though now the subheader wont align properly HtML: <link href="template.css" rel="stylesheet" type="text/css"> <div class="root"> <div class="header-wrap"> <div class="header"></div> </div> <div class="subheader-wrap"> <div class="subheader"> <div style="float:left; height:50px; width:32px; border-bottom:2px solid #FFF"></div> <div class="logo"> <img src="../aaronallar/files/images/logo.jpg" alt="Aaron ALlar" height="50px" width="150px" /> </div> <div class="nav">Home|About|project|</div> </div> </div> <div class="body-wrap"> <div class="body">sd</div> </div> <div class="subheader-wrap"> <div class="subfooter"></div> </div> <div class="footer-wrap"> <div class="footer"></div> </div> </div> css: body {background:#000; color:#FFF;} .header-wrap, .subheader-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both;} .header, .subheader, .body, .subfooter, .footer {width:960px; margin:0 auto;} .subheader{height:50px;} .logo {float:left;} .nav {float:left; width:auto; padding-top:34px; padding-left:25px;font-weight:bold; 'Times New Roman', Times, serif; font-size:16px;} .body {width:960px; background:#333; border-left:2px solid #FFF; padding-left:30px; border-right:2px solid #FFF; padding-right:30px;border-bottom:2px solid #FFF; padding-bottom:30px;padding-top:30px;}

what white area? the white is the border on the top and bottom, also i wrote it for a drupal theme

site http://allar.cmccd.net html <style type="text/css"> @import url("template.css"); </style> <div class="root"> <div class="header-wrap"> <div class="header"> <?php print render($page['header']); ?> </div> </div> <div class="subheader-wrap"> <div class="subheader"> <div class="nav-border-left"></div> <div class="nav-wrap"> <div class="navlink"> <?php if (isset($logo)): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo" class="logo"> <img src="<?php print $logo; ?>" alt="Jean & Tony’s Place a family website" height="50px" width="150px"/> </a> <?php endif; ?> <?php print theme('links', array('links' => $main_menu))?> </div> </div> <div class="nav-border-right"></div> </div> </div> <div class="body-wrap"> <div class="body"> <div class="content-border-left"></div> <div class="content-wrap"><?php print render($page['content']); ?></div> <div class="content-border-right"></div> </div> </div> <div class="subfooter-wrap"> <div class="subfooter"> <div class="subfooter-border-left"></div> <div class="subfooter-content-wrap"></div> <div class="subfooter-border-right"></div> </div> </div> <div class="footer-wrap"> <div class="footer"><?php print render($page['footer']); ?></div> </div> </div> css: .header-wrap, .subheader-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both; background:#000;} .header, .subheader, .nav, .body, .subfooter, .footer {width:1100px; margin:0 auto;} .body {float:none;} /* needs a height*/ .header {height:50px; width:960px;} .nav-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/topleft-wire.png) no-repeat right;} .nav-wrap{float:left;celar:both; width:960px;height:70px;} .nav-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/topright-wire.png) no-repeat;} .content-border-left {float:left;clear:left; height:100%; width:70px; background:url(files/images/left-wire.png) repeat-y;} .content-wrap{float:left;width:960px; color:#FFF; font-family:Lucida Grande, Verdana, sans-serif;} .content-border-right {float:left;clear:right; width:70px; background:url(files/images/right-wire.png)repeat-y;} .subfooter {height:70px;} .subfooter-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/bottomleft-wire.png) no-repeat right;} .subfooter-content-wrap{float:left;celar:both; width:960px;height:70px; background:url(files/images/bottom-wire.png);} .subfooter-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/bottomright-wire.png) no-repeat;} .links{margin:0;padding:0;} .navlink {} .navlink li {display:inline;} .navlink a {float:left; height:33px;font-weight:bold;line-height:32.75px; 'Times New Roman', Times, serif; font-size:16px;padding:0 25px; color:#FFF;text-align:center; border-right:1px solid #FFF;text-decoration:none; text-shadow:0px 1px 0px #185edf;} .navlink a:hover {background:url(/sites/all/themes/ssccix/files/nav-arrow.png) no-repeat center top; text-decoration:none;} .navlink a.active {background:#FFF; no-repeat center top;color:#091342;} .footer {} /*.border-left {float:left;height:100%;clear:left; width:2px; background:#fff;} .content-wrap{float:left;height:100%; width:960px; background:#555;} .border-right {float:left;height:100%;clear:right; width:2px; background:#fff;} */ The problem is that as you see the site the content is pushed to the left and the white borders on the left and right disappear, though they will show up if i have a pre-set height in the .body{} but than it will not auto height for the text. any ideas on the problem?

Thank you Samuz after going through it that was the problem

Site: http://test2.cmccd.net/ As you can see the navigation links wont lign up right with the nave bar. can any one see whats the problem i spent 2 hours trying to figure it out but it just wont work. CSS .header-wrap, .subheader-wrap, .nav-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both;} .header, .nav, .body, .subfooter, .footer {width:960px; margin:0 auto;} .header {height:100px;} .sub-header {margin:0 auto; height:38px; width:960px;} .subheader {float:right; width:518px; background:#FFF; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; padding-top:5px; padding-left:5px; padding-right:5px;} .subheader-content {height:32px; width:518px; background:#8b6a1f; } .nav-wrap{height:44px;} .nav-subwrap {margin:0 auto; height:33px; width:948px; padding-left:5px; padding-top:5px;padding-right:5px;padding-bottom:6px;background:#fff; border-left:1px solid #000; border-right:1px solid #000;} .navtop {width:960px; margin:0 auto;} .navtopborder {float:left; border-top:1px solid #000; width:431px; } .nav{float:left; width:948px; height:33px; background: url(/sites/all/themes/ssccix/files/bg-nav.png) repeat-x;} .navlink {} .navlink li {display:inline;} .navlink a {float:left; font-size:16px; background:#f00; padding:2px 10px; border-right:1px solid #FFF;} .page {float:left; background:#FFF; padding-left:10px; padding-right:10px; padding-bottom:10px; padding-top:5px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; margin-bottom:10px;} .page-left {float:left; width:220px; padding-right:8px;} .page-content {float:left; width:710px;} .footer {background:#8b6a1f;} PAGE <body style="background:#e8c077 url(/sites/all/themes/ssccix/files/bg-top.png) repeat-x;"> <div id="root" > <div class="header-wrap"> <div class="header"> <div class="logo"><?php print '<a href="/"><img scr="'.$logo.'" alt="'.variable_get('site_name', '').'" /></a>'; ?></div> <?php print render($page['header']); ?></div> </div> <div class="subheader-wrap"> <div class="sub-header"> <div class="subheader"> <div class="subheader-content"><?php print render($page['sub_header']); ?></div> </div> </div> </div> <div class="nav-wrap"> <div class="navtop"> <div class="navtopborder"></div> </div> <div class="nav-subwrap"> <div class="nav"> <div class="navlink"><?php print theme('links', array('links' => $main_menu))?></div> </div> </div> </div> <div class="body-wrap"> <div class="body"> <div class="page"> <div class="page-left"><?php print render($page['sidebar_left']); ?> </div> <div class="page-content"><?php print render($page['content']); ?></div> </div> </div> <div class="subfooter-wrap"> <div class="subfooter"><?php print render($page['sub_footer']); ?></div> </div> <div class="footer-wrap"> <div class="footer"><?php print render($page['footer']); ?></div> </div> </div> </body>