Problem med positionering av divar...

Jag har fått det att se bra ut skulle någon vilja slänga ett öga på koden o säga om det är ok kodmässigt

HTML:

<div id="container">
        <div id="logo">
            <div class="logobild"><img src="images/logo/huvudlogo.jpg" alt="" width="276" height="73" /></div>
        </div>
        <div id="toptabs">
            <a class="toptab" href="index.html">Hem</a><span class="lineseparator"> | </span>
            <a class="toptab" href="#">Kontakta oss</a><span class="lineseparator"> | </span>
            <a class="toptab" href="#">Mina sidor</a><span class="lineseparator">&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <div id="navigation">
          <ul>
            <li class="activetab"><a href="#"><span>Kurser</span></a></li>
                <li><a href="#"><span>Praktisk info</span></a></li>
                <li><a href="#"><span>Bokning</span></a></li>
                <li><a href="#"><span>Om oss</span></a></li>
                <li class="last"><a href="#"><span>Länkar</span></a></li>
          </ul>
        </div>
        <div id="Searchfield">
        <form id="form1" name="form1" method="post" action="">
           <span class="greyHeader">Vad söker du?</span>&nbsp;<input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" />&nbsp;<input type="submit" class="input" name="button" id="button" value="Sök" /> </form>
        </div> 
</div>

CSS:

/* \*/
* html #tlc, * html #trc {height: 1%;}
#tlc, #trc { zoom: 1 }
/* */

/* General layout */
body {background-image: url(images/bakgrnd/greyblue_line.gif); background-repeat: repeat-x; color:#000000; font:76% tahoma, verdana, sans-serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}

/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}

/* Toptabs menu */
#toptabs {font-size:.8em; margin:5px auto -13px; width:674px; text-align:right; float:left;}
.toptab {margin:0 5px 0 0; padding:4px 5px 4px; text-decoration:none;}
.toptab:hover { text-decoration:underline;}

/* Logo */
#logo {margin:0 auto 0; width:276px; text-align:left; float:left;}

/* Searchfield */
#Searchfield {width:950px; font-size: 1.1em; margin:0px auto 0px; color:#3066a9; text-align:center; font-weight:bold; padding:10px 0px 0px; float:left;}

/* Navigation */
#navigation {width:674px; font-size: 1.1em; padding-top: 0px; margin:44px auto -13px; float:left;}

#navigation ul, #navigation ul li {list-style: none; margin: 0; padding: 0;}

#navigation ul { padding: 5px 0 4px; text-align: right;}

#navigation ul li {display: inline;margin-right: -5px;}

#navigation ul li.last {margin-right: 0;}

#navigation ul li a {background: url("images/knappar/tab-right.gif") no-repeat 100% 0; color: #FFFFFF;padding: 7px 0; text-decoration: none;}

#navigation ul li a span {background: url("images/knappar/tab-left.gif") no-repeat; padding: 7px 1em;}

#navigation ul li a:hover span {color: #CCCCCC; text-decoration: underline;}

* html #navigation ul li a {padding: 0;}

.activetab {background: url("images/knappar/tab-right.gif") no-repeat 100% 0; color: #06C;padding: 7px 0; text-decoration: none;}

Sen har jag en extrafundering kring menyn som är uppbyggd av en punktlista

När man har klickat på en sida så att en flik blir active så vill jag att den ska ändra färg dvs byta bild på bara den fliken. så som jag har illustrerat på bilden jag har bifogat (nu är alla blåa enl css koden)

Tack på förhand

Jag löste det med en annan formatering av punktmenyn men är fortfarande lite fundersam kring placeringen av divarna... skulle någon kunna titta på det kodmässigt annars är allt löst.

se mitt första inlägg på bild webforum.jpg det är så jag vill att det ska vara placerat fast med csskod istälet för tabell ska man använda sig av absolut eller relative placaring vilket är "bäst"

HTML

<div id="container">
        <div id="logo">
            <div class="logobild"><img src="images/logo/huvudlogo.jpg" alt="" width="276" height="73" /></div>
        </div>
	  <div id="toptabs">
            <a class="toptab" href="index.html">Hem</a> | 
            <a class="toptab" href="#">Kontakta oss</a> | 
            <a class="toptab" href="#">Mina sidor</a>        </div>
        <div id="TopMenuPanel">
   	  <div id="TopMenuControl_MenuPanel">
          		<ul id="TopMenuControl_Navigator" class="TopMenu stackNavigator">
                	<li><a href="#">Länkar</a></li>
                    <li><a href="#">Om oss</a></li>
                    <li><a href="#">Bokning</a></li>
                    <li><a href="#">Praktisk info</a></li>
               	  	<li class="active"><a href="#">Kurser</a></li>
        </ul>
       	  </div>
        </div>
        <div id="Searchfield">
        <form id="form1" name="form1" method="post" action="">
           <span class="greyHeader">Vad söker du?</span>&nbsp;<input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" />&nbsp;<input type="submit" class="input" name="button" id="button" value="Sök" /> </form>
        </div>

CSS

/* General layout */
body {background-image: url(images/bakgrnd/greyblue_line.gif); background-repeat: repeat-x; color:#000000; font-family:"Gill Sans MT" , Arial, Sans-Serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}

/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}

/* Toptabs menu */
#toptabs {
	position:absolute;
	font-size:.8em;
	width:950px;
	text-align:right;
	z-index: 1;
}
.toptab {text-decoration:none;}
.toptab:hover {color:#3066a9; text-decoration:underline;}

/* Logo */
#logo {width:950px; z-index:0; float:left; position:absolute;}

/* Searchfield */
#Searchfield {float:left; position:absolute; top:79px; width:950px; font-size: 1em; margin:0 auto 0; color:#3066a9; text-align:center; font-weight:bold;}

/* TopMenu */
#TopMenuPanel {float:right; position:relative; right:0; padding-right:0;}
.TopMenu {list-style:none none; margin:0; padding:0;}
.TopMenu li {
	font-size:1.0em; 
	position:relative; 
	float:right; 
	height: 37px; 
	width: 102px; 
	text-align:center; 
	background:transparent url(images/knappar/bg.png) no-repeat 0 0; 
	margin: 39px -5px 0 0; 
	padding: 0; 
	overflow: hidden;
}
.TopMenu li a,
.TopMenu li span {display: block; text-decoration: none; padding: 6px 0 7px; color: #FFFFFF; white-space: nowrap;}
.TopMenu li a:hover {color: #FFFFFF; text-decoration: none;}
.TopMenu img.normal {}
.TopMenu img.selected {display: none;}
.TopMenu .active{ background-image: url(images/knappar/bg_sel.png);}
.TopMenu .active a{color: #3066a9;}
.TopMenu .active img.normal {display: none;}
.TopMenu .active img.selected {display: inline;}