divvar blir olika breda

Någon som vet varför andra divven blir bredare än den första? (se bifogad bild)
Jag hör ju till den gamla skolan som lärde sig att bygga sidor med tabeller för 20 år sen, så det kanske är något enkelt fel?

/red
Glömde skriva att i högerkant så blir dom jämna, så det är bara i vänsterkanten det gäller.
/red igen
Glömde även att det ser ok ut i FF men inte i IE.

<div id="metadata">
	  ... tog bort det som fanns här ...
</div>
<!-- här blir 'hacket' -->
<div id="content"> 
	  <div id=header>
                  ... här finns min flikmeny ...
          </div>
</div>

min css

/* Metadata */

#metadata {
	background-color:#202457;
	color:#FFFFFF;
	height:70px;
	padding: 7px 7px 7px 7px;
}

#metadata a{
	color: #FF3300;
	text-decoration: none;
}

/* Content */

#content {
	background-color:#fff;
	color:#FFFFFF;
}

/* Tab-menus */
unknown {
	font-size: small
}

#header {
	font-size: 93%; 
	background: url(images/tabs/bg2.gif) #fff repeat-x 50% bottom; 
	float: left; 
	width: 100%; 
	line-height: normal;
}

#header ul {
	padding-right: 10px; 
	padding-left: 10px; 
	padding-bottom: 0px; 
	margin: 0px; 
	padding-top: 10px; 
	list-style-type: none;
}

#header li {
	padding-right: 0px; 
	padding-left: 9px; 
	background: url(images/tabs/left.gif) no-repeat left top; 
	float: left; 
	padding-bottom: 0px; 
	margin: 0px; 
	padding-top: 0px;
}

#header a {
	padding-right: 15px; 
	display: block; 
	padding-left: 6px; 
	font-weight: bold; 
	background: url(images/tabs/right.gif) no-repeat right top; 
	float: left; 
	padding-bottom: 4px; 
	color: #765; 
	padding-top: 5px; 
	text-decoration: none;
}

#header a {
	float: none
}

#header a:hover {
	color: #333
}

#header #current {
	background-image: url(images/tabs/left_on.gif)
}

#header #current a {
	background-image: url(images/tabs/right_on.gif); 
	padding-bottom: 5px; 
	color: #333
}