Template - Header Problem bitte helfen.

Hallo habe eine Frage geht es das man 2 header nebeneinander einbaut, wenn ja was habe ich in den Scripten falsch gemacht:

Template Script:

<!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" xml:lang="de" lang="de">
<head>
<title>YAML Typo3 - 3 Spalten variabel - Shinybuttons (1-3-2)</title>
<link href="../css/layout_test_shinybuttons.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="../css/explorer/iehacks_3col_vlines.css" rel="stylesheet" type="text/css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
	background-color: #5f461c;
}
-->
</style></head>

<body>
<div id="page_margins">
<div id="page" class="hold_floats">

<div id="header1">
	<div id="topnav">
	    <!-- Start: Skiplink-Navigation -->
		<a class="skip" href="#navigation" title="Direkt zur Navigation springen">Zur Navigation springen</a>
		<a class="skip" href="#content" title="Direkt zum Content springen">Zum Content springen</a>	
	    <!-- Ende: Skiplink-Navigation -->

		<a href="#">Impressum</a>
	</div>
	<img src=".././img/yaml_title.gif" alt="Yet Another Multicolumn Layout"/>
</div>
<div id="header2">
	<div id="topnav">
	    <!-- Start: Skiplink-Navigation -->
		<a class="skip" href="#navigation" title="Direkt zur Navigation springen">Zur Navigation springen</a>
		<a class="skip" href="#content" title="Direkt zum Content springen">Zum Content springen</a>	
	    <!-- Ende: Skiplink-Navigation -->

		<a href="#">Impressum</a>
	</div>
	<img src=".././img/yaml_title.gif" alt="Yet Another Multicolumn Layout"/>
</div>


<!-- #nav: Hauptnavigation -->
<div id="nav">
	<a id="navigation" name="navigation"></a> <!-- Skiplink-Anker: Navigation -->
	<div id="nav_main">
		<ul>
			<li id="first">&nbsp;</li>
			<li id="current"><a href="#">Button 1</a></li>
			<li><a href="#">Button 2</a></li>
			<li><a href="#">Button 3</a></li>
			<li><a href="#">Button 4</a></li>
			<li><a href="#">Button 5</a></li>
			<li id="last">&nbsp;</li>
		</ul>
	</div>
</div>
<!-- #nav: - Ende -->

<!-- #main: Beginn Inhaltsbereich -->
<div id="main">
<div id="teaser" class="clearfix">
<div class="block1">
<ul>
  <li>Verst&auml;ndlich</li>
  <li>Flexibel</li>
  <li>Standardkonform</li>
  <li>Barrierearm</li>

  <li>Anpassbar</li>
  </ul>
</div>
<div class="block2"><img src="img/yaml_screens.gif" alt="Screenshots"/></div>
<div class="block3"><span class="title">Modernes Weblayout verständlich erklärt</span>
<p>"Yet Another Multicolumn Layout" ist ein Framework zur Erstellung moderner
und flexibler Layouts auf Grundlage von <em>float</em>-Umgebungen. 
Dabei stehen ein m&ouml;glichst hohes Ma&szlig; an
Flexibilit&auml;t und Zug&auml;nglichkeit
im Vordergrund. Innerhalb eines Tutorials wird die Funktionsweise der einzelnen Bausteine erläutert.</p>
</div>
</div>

<!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
    <div id="col1">
      <div id="col1_content" class="clearfix">

        <h2>Spalte #col1</h2>
        <p>...</p>

	  </div>
    </div>
<!-- #col1: - Ende -->

<!-- #col2: zweite Flaot-Spalte des Inhaltsbereiches -->
    <div id="col2">
    	<!--TYPO3SEARCH_begin-->
      <div id="col2_content" class="clearfix">

        <h2>Spalte #col2</h2>
        <p>...</p>

      </div>
      <!--TYPO3SEARCH_end-->
    </div>
<!-- #col2: - Ende -->

<a id="content" name="content"></a> <!-- Skiplink-Anker: Content -->
<!-- #col3: Statische Spalte des Inhaltsbereiches -->
    <div id="col3">
    	<!--TYPO3SEARCH_begin-->
      <div id="col3_content" class="clearfix">
      	<div id="col3_innen" class="floatbox">

        <h2>Spalte #col3</h2>
        <p>...</p>

		  </div>
      </div>
      <!--TYPO3SEARCH_end-->
      <!-- IE Column Clearing -->
      <div id="ie_clearing">&nbsp;</div>
      <!-- Ende: IE Column Clearing -->

</div>
<!-- #col2: - Ende -->

</div>
<!-- #main: - Ende -->

<!-- #Footer: Beginn Fusszeile -->
<div id="footer">
    Dieses Layout basiert auf <a href="http://www.yaml.de/">YAML</a> &copy; 2005-2006 by <a href="http://www.highresolution.info">Dirk Jesse</a>
</div>
<!-- #Footer: Ende -->
</div>
</div>
</body>
</html>

CSS Script wovon sich das Tempalte Script die Daten zieht:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ######################################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 6.11.06
**  Datei       : basemod.css
**  Funktion    : Basis-Modifikation für das Layout des YAML-Tutorials
**  Checked with http://jigsaw.w3.org/css-validator/ 19.1.07 - DB
*/

@media all
{

/* Formatierung der Seite */
body {background:#99a; padding:10px;}

/* Hier kann ein umlaufender Rand um die gesamte Webseite erzeugt werden */
#page{border:1px #2fbcc3 solid; background:#fff;} /* innere 1pxl Rahmen */
#page_margins {border:1px #2fbcc3 solid; min-width:756px; max-width:80em; margin:auto;} /* äußer 1px Rahmen */

/* Formatierung der Kopfbereiches */
#header1 {
	position:relative;
	height:140px;
	color:#fff;
	background:#1f1e2e url(../../img/yaml_bg.gif) repeat-x top;
	width:50%;
}
#header2 {
	position:relative;
	height:140px;
	color:#fff;
	background:#1f1e2e url(../../img/yaml_bg.gif) repeat-x top;
	width: 50%;
}
#header img {position:absolute; top:23px; left:10px; font-size:208%;}
#banner {position:absolute; top:20px; right:0px; z-index:10;}
#banner img {position:relative; top:0px; left:0px; font-size:100%;}
#topnav {top:100px;}
#header div.tx-macinasearchbox-pi1 {position:absolute; top:130px; right:10px; font-size:0.8em;}
#header div.tx-macinasearchbox-pi1 input {margin-left:0;}

/* Formatierung der Fußzeile */
#footer {color:#2fbcc3; background:#fff; margin:1em; padding:1em 0 0 0; border-top:1px #ddd solid; line-height:2em;} /*normale Footerschriftfarbe*/

/* ######################################################################################################
** ### Formatierung der Inhaltsspalten ##################################################################
** ######################################################################################################
*/
#main {background:#fff ; padding-top:0;}

/* linke Spalte */
#col1 {width:22.5%;}
#col1_content {margin-left:1em; margin-right:1em; color:#000000; background:inherit;} /* Linkes Feld Schriftfarbe */

/* Rechte Spalte */
#col2 {width:25%;}
#col2_content {	margin-left:1em; margin-right:1em;}

/* Mittlere Spalte */
#col3 {margin-left:22.5%; margin-right:25%; border-left:0px dotted #2fbcc3; border-right:0px dotted #2fbcc3;}
#col3_content {margin-left:1em; margin-right:1em;}

/* ######################################################################################################
** ### Formatierung des Teasers der Startseite ##########################################################
** ######################################################################################################
*/
#teaser {margin:0; padding:0; background:#2dbfc8; color:#000000;} /* Navigationsschrift unter Header */
#teaser div {float:left; width:auto; margin-right:1em;}
#teaser .block1 {padding:0.5em 0 0.4em 1em; font-size:0.82em;}
#teaser .block1 a {color:#334;}
#teaser .block1 a:hover {background:transparent;}
#teaser .block3 {width:45%; padding-top:0.5em; font-size:0.82em;}
#teaser .langMenu {float:right; padding-top:0.2em; margin-right:0;}
#teaser .selectFontSize {float:right; padding-top:0.4em; padding-right:1em;}
#teaser .selectFontSize a {color:#334;}
#teaser .selectFontSize a:hover {background:transparent;}
#teaser .aktDatum {float:right; font-size:0.82em; padding-top:0.5em; padding-right:1em;}
#teaser .block3 .title {font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; display:block; font-size:1.2em; font-weight:bold; color:#336699; background:inherit; margin:0 0 0.5em 0;}

}

das wird nicht erlaubt sein, denn ids müssen eindeutig sein

georg

Doch das geht ja es zeigt richtig an, nur, dass die beiden Header untereinander stehen und ich die nebeneinander haben möchte.