CSS - Header Alignment Problem

style :: [ ] [ ]

style ::
[ ] [ ]

<div id="style_selector">
    <p>style ::&nbsp;
        <a href="#" onclick="setActiveStyleSheet('SE001');
        return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
        <a href="#" onclick="setActiveStyleSheet('SE002');
        return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
    </p>
</div>

#style_selector{
	position: absolute;
	top: 70px;
	left: 160px;
	height: 25px;
	width: 100%;
	text-align: left;
}
#style_se001{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #6187E1;
	display: block;
	border: 1px solid #ffffff;
}
#style_se001:hover{
	border: 1px solid #6187E1;
}
#style_se002{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #FCB029;
	display: block;
	border: 1px solid #ffffff;
}
#style_se002:hover{
	border: 1px solid #FCB029;
}

<style type="text/css">
body
{
	background-image:url('bg-1.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#FFF;
	background-attachment:fixed;
}
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: 1300px;
	width: 1000px;
	margin:0px auto;
	text-align:left;
}
#branding {
	height: 228px;
	width: 1000px;
}
#branding #logo {
	height: 228px;
	width: 1000px;
	position: relative;
	background-image:url('hooplogolarge.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#000000;
}
#siteNav {
	height: 38px;
	width: 1000px;
	color: #FFF;
	background-color: #000;
	line-height: 38px;
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	float: none;
	text-align: center;
	word-spacing: normal;
	font-size: 24px;
}
#mainContentWrapper {
	float: none;
	width: 1000px;
	background-color: #FFF;
}
#mainContentWrapper #news {
	float: left;
	width: 265px;
	height: 953px;
	background-color:#FFF;
	border: thin dashed #000;
	padding: 10px;
}
#mainContentWrapper #mainContent {
	float: left;
	width: 488px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#mainContentWrapper #siteAds {
	float: right;
	width: 175px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#footer {
	width: 1000px;
	font-size: 9px;
	color: #CCC;
	text-align: center;
	line-height: 35px;
	background-color: #000;
	clear: both;
}
</style>

html {height:100%;}

body{

margin:0; padding:0; height:100%;
font-family:Times New Roman, serif;
background-color:white;
}


#wrap{

background-image:url(bgimage.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
width:790px;
margin:auto;
}


* html #wrap {height:100%}

#header{

background-image:url('keyboard.jpg');
background-position:left;
background-repeat:no-repeat;
background-color: #FEFEFE;
margin:0; padding:0;
height:117px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
}


p{

margin:0px; padding:0;
font-family: courier;
}


p.headline{

margin:0px; padding-left:5px;
font-family: arial;
font-weight:bold;
font-size:70%;
}


p.news{

margin:0px; padding-left:5px;
font-family: arial;
font-size:70%;
color:#808080;
}


h1{

position:relative;
line-height:0px;
margin:0; padding-left:10px;
font-size:115%;
color:#1B018E;
}


#left{

float:left;
width:200px;
text-align:left;
background-color:#FFFFFF;
border-left: 1px solid #777777; 
border-right: 1px solid #777777; 
}


#main{

float:right;
clear:both;
text-align:left;  
width:565px;
border-right: 1px solid #777777;
}


#clearfooter{

clear:both;
height:30px;
overflow:hidden;
}


#footer{

height:30px;
background-color: #777777;
margin:0 auto; padding:0;
margin-top:-30px;
color:#FFFFFF;
text-align:center;
width:790px;
}


#bannercell{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:117px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


#borderleft{

border-left: 1px solid #777777; 
}


#topright{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:53px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


input.box{

height:17px;
}


#linkbanner{

width:615px;
height:19px;
float:left; 
text-align:left;
border-left: 1px solid #777777; 
background-color: #777777;
}


#grayfade{

float:right;
clear:both;
border-right: 1px solid #777777;
background-image:url(gray_grad.jpg);
width:175px;
height:16px;
}


#space{

border-right: 1px solid #777777;
border-left: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:790px;
}


#extraspace{

float:right;
clear:both;
border-right: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:565px;
}


#newsbar{

background-image:url(blue_grad.jpg);
background-repeat:no-repeat;
width:200px;
height:10px;
}


#mainbar{

background-image:url(blue_lg.jpg);
background-repeat:no-repeat;
width:565px;
height:10px;
border-right: 1px solid #777777;
}


#mainbarsm{

float:right;
clear:both;  
width:565px;
background-image:url(blue_thin.jpg);
background-repeat:no-repeat;
height:5px;
}


#heading{

background-color: #FFFFFF;
margin:0; padding:0;
height:53px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
text-align:left;
}

<center>
<body background="../images/bg_texture2.gif">
<div id="wrap">

<div id="heading"><img src="../images/logo.gif"><font face="Bodoni MT" size="5" color="#040C89">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Company Name</font></div>

<div id="topright"><font color="#6666FF">Monday April 4, 2005</font></div>

<div id="header"></div>

<div id="bannercell"><center>.::Client Login::.</center>
<br>
<font size="2">username&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" class="box">
password&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" size="13" class="box"></font>
<center><input type="submit" value="Login"></center></div>

<div id="linkbanner"><font color="#FFFFFF" size="2">About Us&nbsp;&nbsp;|&nbsp;&nbsp;Services&nbsp;&nbsp;|&nbsp;&nbsp;Solutions&nbsp;&nbsp;|&nbsp;&nbsp;Help Desk&nbsp;&nbsp;|&nbsp;&nbsp;Training&nbsp;&nbsp;|&nbsp;&nbsp;Careers&nbsp;&nbsp;|&nbsp;&nbsp;Contact</font></div>
<div id="grayfade">&nbsp;</div>

<div id="space">&nbsp;</div>

<div id="left">

<div id="newsbar"><h1>Recent News</h1></div>

<p class="headline">.::New Website::.</p>
<p class="news">We're launching a new website in the near future.  Look for great things to come!</p><br>
<p class="headline">.::Done using CSS::.</p>
<p class="news">No tables with this design.  "Out with the old and in with the new."</p><br>
<p class="headline">.::Continuously Changing::.</p>
<p class="news">With us having recent news on the website, the main page will be changing all
the time with the latest info about Us and stuff</p><br>
<p class ="headline">.::Sales Platform::.</p>
<p class="news">We can also use this as an area for sales opportunities and promotion.  It will
be a good reference for all new products and features from Us.</p>
</div>

<div id="main">

<div id="mainbar"><h1>Your Cool Slogan</h1></div>
<br>

<p class="news"><strong>Intuitive.</strong>  Having the knowledge and experience in a changing <img src="../images/imis.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering <strong>software solutions, innovative design, and managed services.</strong>
Specializing in <i>sutff</i> and ore stuff</i> software we are able to expand the dimensions of your organization, and provide you with the solutions needed for an on demand world.
</p>

<div id="mainbarsm"></div>

<p class="news">Having the knowledge and experience in a changing <img src="../images/microsoft.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering software solutions, innovative design, and managed services.
</p>
</div>

<div id="extraspace"></div>

<div id="clearfooter"></div>

<div id="footer">
<center><font size="2">2005 Us. All rights reserved.<br>
Site produced by a Web Guy, Content Manager.</font></center>
</div>

</body>
</center>

<style type="text/css">
.formInput:after, .formInput .formField:after{
clear:both;display:block;visibility:hidden;height:0;content:'.'}
.formField {float:left;width:40%;}
.formInput{position:relative;}
.formInput div.ex{position:static;left:24%; width:5em}
.formLabel {float:left;width:25%;text-align:right;}
</style>

<div style="width:700px">
<form>          
<div id="cityFld" class="formInput">
	<div class="formLabel"><label for="city">City</label></div>
	<div class="formField">
		<input type="text" name="city" id="city" value="">
		<div class="ex">city explanation</div>
	</div>
</div>


<div id="zipFld" class="formInput">
	<div class="formLabel"><label for="city">Zipcode</label></div>
	<div class="formField">
		<input type="text" name="zip" id="zip" value="">
		<div class="ex">zip explanation</div>
	</div>
</div>
</form>
</div>

<!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=iso-8859-1" />
<title>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
	<table width="898" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
		<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
		<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
		<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
		<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
		<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
		<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
		<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
		<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
		<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
		<td colspan="6" class="border_top"></td>
		<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
		<td colspan="8" class="bg_main">
		<table width="832" border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="bg_menu"><div class="bg_menu_left">&nbsp;</div></td>
			<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
			<td class="bg_menu"><div class="bg_menu_right">&nbsp;</div></td>
		  </tr>
		</table>
		</td>
		<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
		<td colspan="8" class="border_bottom"></td>
		<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
	  </tr>
	</table>
</center>
</body>
</html>

/* BEGIN GENERAL SETTINGS */
	body	{
		background-color:#B0D2F4;
		background-image:url(../images/body_bg.jpg);
		background-position:top;
		background-repeat:repeat-x;
		margin:0px;
		text-align:center;
		}
	body, td, div	{
		text-align:left;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#333333;
		}
		
/* BEGIN TD SETTINGS */
	td.border_top	{
		background-image:url(../images/menu_4.jpg);
		background-repeat:repeat-x;
		}
	td.border_left	{
		width:30px;
		background-image:url(../images/border_left_2.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		}
	td.border_right	{
		width:30px;
		background-image:url(../images/border_right_2.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		}
	td.border_bottom	{
		height:30px;
		background-image:url(../images/bottom_2.jpg);
		background-repeat:repeat-x;
		}
	td.bg_main	{
		background-color:#EFEFEF;
		padding:3px;
		vertical-align:top;
		}
	td.bg_menu	{
		background-color:#829CB5;
		vertical-align:top;
		padding:0px;
		width:206px;
		}
	td.bg_center	{
		padding-left:2px;
		padding-right:2px;
		padding-top:0px;
		padding-bottom:0px;
		vertical-align:top;
		width:420px;
		}
		
/* BEGIN DIV SETTINGS */
	div.bg_menu_left	{
		background-image:url(../images/menu_left_bg.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		width:200px;
		padding:2px;
		margin:3px;
		}
	div.bg_menu_right	{
		background-image:url(../images/menu_right_bg.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		width:200px;
		padding:2px;
		margin:3px;
		}

<center>
<div id="hpMaincanvas">

<? include('includes/topnav.php'); ?>

<div id="aboutArea">
<h2>About VERVANO</h2>

VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections 
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>

This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and 
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this 
process has been met with rigorous research and challenging sourcing.<P>

Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are 
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>

It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>


<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>

<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.  
She went on to manage and design large scale, multi-million dollar interior design 
and architecture projects for the United States Air Force Academy.  She later 
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree 
in Architecture with emphasis in Sustainable Design.  Through her architectural 
background she developed a contextual understanding of buildings as integrated 
systems. Following her graduation from the University of Texas she subsequently 
worked in complex hospitality design and architecture in Austin, TX, giving her a 
unique and real-world perspective regarding many attributes of public space design. <P>
 
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention 
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates 
architectural and interior design solutions to create on budget, on time, functional environments.  <P>
 
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user.  Laura Britt Design firm is 
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff.  <P>
 

<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally 
trained to identify the key factors driving the architecture and design and construction of each building 
project with the facilities team and architecture team. 
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site 
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and 
rendering. <P>

<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned 
Business.  HUB certification was granted in November or 2008.  The firm is also listed on the states Central 
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>

Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time, 
on-budget projects through continuing business education and the sharing of best practices.<P>

</div>


<? include('includes/footer.php'); ?>
</center>

body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   color: #645133;
   background: url(art/bg.jpg);    
   background-repeat: no-repeat;
   background-position: center top;
}
 
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 30px;
   font-weight: lighter;
   color: #49320f;
}
 
h2 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color: #49320f;
   margin-top: -20px;
   font-weight: lighter;
   line-height: 36px;
}

#hpMaincanvas {
   position: relative;
   padding: 0px;
   width: 900px;
   margin-top: 35px; 
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff; 
   z-index:5;
}


#socialMedia {
   position: relative;
   font-family: georgia,palatino,serif;
   font-size: 12px;
   color: #bbb38c;
   line-height: 17px;
   font-style: italic;
   padding-right: 50px;
   width: 900px;
   text-align: right;
}


#MainArea {
   position: relative;
   padding-right: 50px;
   padding-top:0px;
   width: 900px;
   text-align: center;
   z-index:20;
}

#AboutArea {
   position: relative;
   padding-right: 50px;
   padding-left: 50px;
   padding-top:30px;
   width: 800px;
   z-index:20;
   text-align:left;
}

#footer {
   position: relative;
   text-align: center;
}


#navigation {
   position: absolute;
   top:40px;
   width: 600px;
  left: 320px;
   font-weight: normal;
	z-index:25;
	margin-left: auto ;
  margin-right: auto ;

}


li {
   list-style: none;
   float: left;
   position:relative;
}


ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  }

ul li {
  display: block;
  position: relative;
  float: left;

}
  
li ul {
  display: none;
  border: 1px solid #e2ddbe;
  }


ul li a {
  display: block;
  text-decoration: none;
  text-align:left;
  color: #594425;
  padding: 7px 7px 7px 7px;
  white-space: nowrap;
  
}
ul li a:hover { 
color: #d93800;
 }
 
li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
  background: #efede1;;
}

li:hover a { 
 
}


li:hover li a:hover 
{ background: #ffffff; }

.logo {
	position: absolute;
	top: 30px;
	left: 50px;
}

.label {
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 11px;
  	text-transform: uppercase;
	line-height: 19px;
	letter-spacing: 2pt;
	color: #a99573;
}

.copyright {
	font-family:georgia,times,serif;
	font-size:11px;
	color:#beb692;
	text-align:center;
}

a.copyright, a.copyright:link, a.copyright:visited {
	text-decoration:none;
	font-family: georgia,times,serif;
	font-size: 11px;
	text-align:center;
}

a.copyright:hover {
	text-decoration:underline;
}

.middle, .submit {
	vertical-align: middle
}