Please see my css and help me fix bugs

hi this is my latest css and please see the css and tell me if any modifications required please. Thanks in advance.

This is the Live Demo of My design:

Live Demo (http://hook4adesign.com/11/index1.htm)


This is My CSS:
@charset "utf-8";
/* CSS Document */
html,body{
margin: 0px;
padding: 0px;
background: #FFFFFF 0px 0px;
}
#wrapper{
width: 1006px;
background: transparent url(../images/main_back.png) repeat-y;
margin-right: auto;
margin-left: auto;
}
#header{
background: transparent url(../images/header.png) no-repeat;
height: 146px;
width: 1006px;
}
.logo{
background: transparent url(../images/logo.png) no-repeat;
float: left;
height: 105px;
width: 479px;
position: relative;
top: 30px;
left: 20px;
}
.address{
float: right;
height: 100px;
width: 170px;
position: relative;
right: 15px;
top: 25px;
font-weight: bold;
padding: 5px;
margin: 0px;
text-align: left;
}
.addresstext{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #0E3A5D;
padding-top: 5px;
}
.addressphonetext{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #E85512;
}

#navbar{
background: url(../images/navbar.png) repeat;
height: 40px;
width: 970px;
margin-right: auto;
margin-left: auto;
clear: left;
}

#navbar ul{
margin: 0;
font-family: "Trebuchet MS";
color: #FFFFFF;
padding-top: 8px;
}
#navbar ul li{
list-style-type: none;
padding: 0;
font-family: "Trebuchet MS";
color: #FFFFFF;
margin-right: 50px;
float: left;
margin-left: 50px;
}
#navbar ul li a{
text-decoration: none;
color: #FFFFFF;
font: bold 16px "Trebuchet MS";
}
#navbar ul li a:hover{
color: #000000;
text-decoration: none;
}

#banner{
background: url(../images/banner.png) no-repeat;
height: 200px;
width: 970px;
margin-right: auto;
margin-left: auto;
margin-top: 8px;
}
.readmore{
background: Transparent url(images/read_btn.png) no-repeat;
height: 25px;
width: 100px;
position: relative;
top: 135px;
left: 780px;
}
img { border: none;
}
#topone{
background: transparent url(../images/top_one.png) no-repeat;
height: 18px;
width: 972px;
margin-right: auto;
margin-left: auto;
}
#mainone{
background: transparent url(../images/middle_one.png) repeat-y;
width: 972px;
margin-right: auto;
margin-left: auto;
height: 835px;
}
#btmone{
background: transparent url(../images/btm_one.png) no-repeat;
height: 10px;
width: 972px;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
}
.h1{
font: bold 28px Verdana, Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;
position: relative;
left: 15px;
top: 10px;
width: 600px;
margin: 0px 0px 15px;
}
.img1{
background: transparent url(images/img_1.jpg) no-repeat;
float: left;
height: 147px;
width: 220px;
margin: 10px 5px 5px 15px;

}
.maintext{
font: 12px "Arial MT";
color: #666666;
margin-right: 15px;
height: 147px;
text-align: justify;
margin-top: 10px;
}
.maintext a{
font: bold 12px "Arial MT";
color: #0000FF;
float: right;
text-decoration: none;
}
.maintext a:hover{
color: #0000FF;
text-decoration: underline;
}
.lft_bio{
float: left;
width: 437px;
position: relative;
left: 15px;
margin-top: 35px;
margin-bottom: 35px;
}
.bioheader{
background: transparent url(../images/bio_top.png) no-repeat;
height: 40px;
width: 435px;
font: bold 18px/35px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-indent: 10px;
}
.biomain{
background:transparent url(../images/bio_main.png) repeat-y;
width: 435px;
height: 200px;
}
.biofooter{
background:transparent url(../images/bio_footer.png) no-repeat;
height: 5px;
width: 437px;
}
.rht_bio{
float: right;
width: 437px;
position: relative;
right: 15px;
margin-top: 35px;
margin-bottom: 35px;
}
.products{
width: 940px;
margin-right: auto;
margin-left: auto;
clear: right;
margin-bottom: 15px;
}
.productshead{
background:transparent url(../images/product_header.png) no-repeat;
height: 43px;
width: 940px;
margin-right: auto;
margin-left: auto;
clear: right;
font: bold 18px/35px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-indent: 10px;
}
.productsmain{
background:transparent url(../images/product_body.png) repeat-y;
width: 940px;
margin-right: auto;
margin-left: auto;
height: 200px;
padding-top: 25px;
}
.productsfooter{
background:transparent url(../images/product_footer.png) no-repeat;
height: 5px;
width: 940px;
margin-right: auto;
margin-left: auto;
}
.adtext{
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #E85512;
text-align: center;
}
#footer{
background: transparent url(../images/footer.png) no-repeat;
height: 58px;
width: 972px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.footertext{
font: bold 12px/55px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
.footertext a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding-top: 45px;
}
.footertext a:hover{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #FFFF00;
text-decoration: underline;
padding-top: 45px;
}
.biography{
font: bold 18px "Century Gothic";
color: #09375B;
text-indent: 5px;
margin-left: 5px;
margin-bottom: 5px;
padding-top: 5px;
margin-top: 3px;
}
.biomaintext{
font: 12px "Arial MT";
color: #000000;
margin: 20px 10px 10px;
text-align: justify;
padding: 0px;
}
.phtext{
font: bold 18px Arial, Helvetica, sans-serif;
color: #E85512;
text-align: center;
}


This is Mark Up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing- One1</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div class="logo"></div>
<span class="address">Northen Stempp<br />
Karolbagharea<br />
Northern area # 312<br />
Kareeb Deosial - 134522<br />
<font color="#FF6600">00987345678</font><br />
</span></div>
<div id="navbar">
<ul>
<li><a href="" title="Some Text">Button-1</a></li>
<li><a href="" title="Some Text">Button-2</a></li>
<li><a href="" title="Some Text">Button-3</a></li>
<li><a href="" title="Some Text">Button-4</a></li>
<li><a href="" title="Some Text">Button-5</a></li>
</ul>
</div>
<div id="banner">
<a href="" class="readmore" title="Read More!!"><img src="images/readmore.png" height="25" width="100" /></a>
</div>
<div id="topone"></div>
<div id="mainone">
<div class="h1">Welcome to our Site</div>
<div class="img1"><img src="images/img_1.jpg" /></div>
<div class="maintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem.Lorem ipsum dolor sit amet, consectetuer <br />
<br />
<br />
<a href="#" title="Click Here to see more Information">more info..</a></div>
<br />
<div class="lft_bio">
<div class="bioheader">Lorem Ipsum</div>
<div class="biomain">
<div class="biography">Lorem Ipsum</div>
<div class="biomaintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
</div><br />
<div class="phtext">Click Here for more Info</div>
</div>
<div class="biofooter"></div>
</div>
<div class="rht_bio">
<div class="bioheader">Lorem Ipsum</div>
<div class="biomain">
<div class="biography">Lorem Ipsum</div>
<div class="biomaintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
</div><br />
<div class="phtext">Click Here or more Ino</div>
</div>
<div class="biofooter"></div>
</div>
<div class="products">
<div class="productshead">Lorem Ipsum</div>
<div class="productsmain">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div align="center"><img src="images/pro_1.jpg" width="129" height="130" /></div></td>
<td><div align="center"><img src="images/pro_1.jpg" width="129" height="130" /></div></td>
<td><div align="center"><a href="#" title="Add some text"><img src="images/pro_1.jpg" width="129" height="130" /></a></div></td>
<td><div align="center"><a href="#" title="Add some text"><img src="images/pro_2.jpg" width="129" height="130" /></a></div></td>
<td><div align="center"><a href="#" title="Add some text"><img src="images/pro_1.jpg" width="129" height="130" /></a></div></td>
<td><div align="center"><a href="#" title="Add some text"><img src="images/pro_2.jpg" width="129" height="130" /></a></div></td>
</tr>
<tr>
<td class="adtext">Lorem Ipsum</td>
<td class="adtext">Lorem Ipsum</td>
<td class="adtext">Lorem Ipsum</td>
<td class="adtext">Lorem Ipsum</td>
<td class="adtext">Lorem Ipsum</td>
<td class="adtext">Lorem Ipsum</td>
</tr>
</table>
</div>
<div class="productsfooter"></div>
</div>
</div>

<div id="btmone"></div>
<Div id="footer">
<div class="footertext"><a href="index.htm">Button-1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="about.htm">Button-2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="products.htm">Button-3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="man.htm">Button-4</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="feedback.htm">Button-5</a></div>
</Div>

</div>
</div>
</body>
</html>

and the problem is what?

Need some sugestions to reduce so many dives in there . And i just validated my css in Here (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhook4adesign.com%2F11%2Findex1.htm&profile=css21&usermedium=all&warning=1&lang=en) no errors found but got 12 warnings.

62 Same colors for color and background-color in two contexts body and #navbar ul
62 Same colors for color and background-color in two contexts html and #navbar ul
69 Same colors for color and background-color in two contexts html and #navbar ul li
69 Same colors for color and background-color in two contexts body and #navbar ul li
71 #navbar ul li In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
76 Same colors for color and background-color in two contexts html and #navbar ul li a
76 Same colors for color and background-color in two contexts body and #navbar ul li a
153 .maintext a In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
242 Same colors for color and background-color in two contexts html and .footertext
242 Same colors for color and background-color in two contexts body and .footertext
247 Same colors for color and background-color in two contexts body and .footertext a
247 Same colors for color and background-color in two contexts html and .footertext a

sorry for the bump. Any help please??

Goodmorning zoe20,
The validator is just telling you that your text color is the same as your background color in a lot of places, it's hard to see white text on a white background. If you meant those colors to be that way, that's fine ... it's just a warning and you can ignore it.

The other items, about the floats.
You need 3 things to float an element:

a Doctype
an element with a width
float:left/right; on that element

Goodmorning zoe20,
The validator is just telling you that your text color is the same as your background color in a lot of places, it's hard to see white text on a white background. If you meant those colors to be that way, that's fine ... it's just a warning and you can ignore it.

The other items, about the floats.
You need 3 things to float an element:

a Doctype
an element with a width
float:left/right; on that element


Again thanks for the prompt reply and can you please tell me where i went wrong please? i think am having a bad habit of using more divs rather than simplify the things. Any suggestions please?

And i also found a fault in there please see the attched image i screen shot it. Where the image adn text is not aligned properly. How to fix it please??

http://i46.tinypic.com/rriioj.jpg

Instead of putting your heading in a div called .h1, use the h1 tag. No div needed for that.

Using your code, add some background colors so you can see where things are going. Like this -
.h1{
font: bold 28px Verdana, Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;
position: relative;
left: 15px;
top: 10px;
width: 600px;
margin: 0px 0px 15px; /*increase this bottom margin if needed*/
background: #00f;
}
.img1{
background: transparent url(images/img_1.jpg) no-repeat;
float: left;
height: 147px;
width: 220px;
/*margin: 10px 5px 5px 15px;*/
margin: 0 5px 5px 15px;

}
.maintext{
font: 12px "Arial MT";
color: #666666;
margin-right: 15px;
height: 147px;
text-align: justify;
margin-top: 10px;
background: #f00;
}

That <div class="h1"> should really be <h1> though, it's a built in header tag. See W3's page on header tags. (http://www.w3schools.com/TAGS/tag_hn.asp)

tks and i have another issue in the previous example i used fixed height and now i want the div to be stretched along with the content so i removed the height on the #mainone div When i removed the height i see a small gap at the bottom . please see the screen shot of it please. How to ix it?

http://i45.tinypic.com/1znrea0.jpg

#topone{
background: transparent url(../images/top_one.png) no-repeat;
height: 18px;
width: 972px;
margin-right: auto;
margin-left: auto;
}
#mainone{
background: transparent url(../images/middle_one.png) repeat-y;
width: 972px;
margin-right: auto;
margin-left: auto;
/ " height: 835px; * \
}
#btmone{
background: transparent url(../images/btm_one.png) no-repeat;
height: 10px;
width: 972px;
margin-right: auto;
margin-left: auto;
padding-bottom: 15px;
}

I don't think the floats need clearing but overflow:auto; seems to do the trick anyway. Could be some form of collapsing margin maybe? Not sure.
Anyway, try this:
#mainone{
background: transparent url(http://hook4adesign.com/11/images/middle_one.png) repeat-y;
width: 972px;
margin-right: auto;
margin-left: auto;
overflow: auto;
}