css "have to set height won't auto"

[Allar]

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?

 

[floridaflatlander]

I think you can get rid of the white area around the parameter by using: body {margin: 0; padding: 0;} note this is not .body. I'm at a loss about the white borders on the left and right.

Were did you get this code from?

[Allar]

I think you can get rid of the white area around the parameter by using: body {margin: 0; padding: 0;} note this is not .body. I'm at a loss about the white borders on the left and right.

Were did you get this code from?

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

[floridaflatlander]

Sorry I miss read your first post, I thought you said you had two problems. My bad.

Anyway YOU wrote it in a drupal theme? I counted 29 divs in your html, if you need them good, if not why have them.

Have you drawn out the basic look of your web page?

I got 15 errors in your html here http://validator.w3.org/ and 10 errors in your css here http://jigsaw.w3.org/css-validator/, and you should book mark these two sites. These errors can effect how your web page is displayed.

I don't know but it looks like you made it harder than it needs to be, there are sharper people here and on other sites maybe they can help you.

[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;}