wilsoncsousa

<style type="text/css">

#navbar {

	background: #9c0 url(images/nav-bg.png) 0 0 repeat-x;

	display:table;

	font: bold 12px tahoma, Arial, Helvetica, sans-serif;

	height: 28px;

	list-style-type:none;

	margin: 0 auto;

	padding: 0;

	position: left;

	width: 750px;

}

#navbar li {

	background: url(images/nav-sep.png) 100% 0% no-repeat;

	float: left;

	margin: 0;

	padding: 0 2px 0 0;

	text-align:center;

	width:200px;

}

#navbar li a:link, #navbar li a:active, #navbar li a:visited {

	color: #fff;

	display: block;

	height: 28px;

	line-height: 28px;

	text-decoration: none;

}

#navbar li a:hover {

	background: url(images/nav-bg.png) 0 100% repeat-x;

}



#navbar li.last{

	background:none;

}

</style>



<ul id="navbar">

	<li><a href="#">ttt</a></li>

	<li><a href="#">rrr</a></li>

	<li class="last"><a href="#">eee</a></li>

</ul>

Rafael,qual seria sua intenção em colocar 3 divs?
Centralizar a div do meio?
Se for essa sua intenção, não necessita de 3 divs para isso, e sim apenas 2.

#principal{
    height:100% !important;
    margin: 0;
    padding; 0;
    position: relative;
    width: 100%;
}

#conteudo{
    height: 600px;
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

<div id="principal">
    <div id="conteudo">
    </div>
</div>

Espero ter ajudado. Caso não seja isso que queria, explique melhor seu peoblema. Boa Sorte.

Pra começar discordo da resposta de Leocarpo, pois você não precisa de uma div para conter seu menu, acho desnecessário.
Na verdade o problema está quando você coloca "float: left" em ".menu li a", dessa forma o link sempre vai estar posicionado à esquerda.
O correto seria colocar "float:left" em ".menu li".
Segue minha solução:

.menu{
display: block;
line-height: 42px;
padding: 0;
width: 100%;
}

.menu li{
border-right: 1px inset #cccccc;
display: inline-table;
float: left;
list-style: none;
padding: 9px 0 8px; /* esse padding eu usei para ajustar a borda que divide os links do menu dentro da div, tem uma distância de 1px no top e no bottom da div */
text-align: center; /* não funcionou antes por causa do float:left em '.menu li a' */
width: 155px; /* 950px/6 = 158,33px - foi o valor que ficou mais correto dentro da div */
}

.menu li a{
color: rgb(51,51,51);
cursor: pointer;
display: block; /* na verdade, não sei pra que serve esse */
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
}

.menu li a:hover{
color: rgb(161,161,161);
}

.menu li a.active, .menu li a.active:hover{
color: rgb(51,51,51);
}

li.last{
border:none;
}

<ul class="menu">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="clientes.php">Parcerias e Clientes</a></li>
<li><a href="equipe.php">Nossa Equipe</a></li>
<li><a href="galeria.php">Galeria</a></li>
<li class="last"><a href="contato.php">Contato</a></li>
</ul>

#box1{
background:#036;
height:200px;
margin:0 auto;
position:relative;
width:400px;
z-index:0;
}

#box2{
background:#999;
height:100px;
margin:-50px auto 0;
position:relative;
width:300px;
z-index:5;
}

#box3{
background:#900;
height:450px;
margin:-100px auto 0;
position:relative;
width:400px;
z-index:0;
}
</style>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>