Je ne sais pas si mon titre est très clair

Voici ma CSS:
body {
background-color: #000000;
color: #FFFFFF;
}

.headerlogo {
float: left;
top: 1em;
left: 1em;
width: 180px;

border: solid 2px;
border-color: green;
}

.headercontent {
margin-top: 1em;
margin-left: 200px;
margin-right: 2em;
height: 101px;
width: 100%;

border: solid 2px;
border-color: green;
}

.mainmenu {
float:left;
margin-top: 1em;
margin-bottom: 2em;
width: 180px;
height: 80%;


background-color: #FFECCE;
border: solid 2px;
border-color : #666666;*/
}

.maincontent {
margin-top: 1em;
margin-left: 200px;
margin-right: 2em;
margin-bottom: 2em;
height: 80%;
width: 70%;

background-color: #FFECCE;
border: solid 2px;
border-color : #666666;*/
}
Mon code HTML

<html>
<head>
<link type="text/css" rel="stylesheet" href="web/styles/main.css">
</head>

<body>
<div class="headerlogo">
<img src="web/images/logos/eurosec2006_noir_small.jpg" alt="Eurosec 2006" />
</div>
<div class="headercontent">
Sahara
</div>
<div class="mainmenu">
Toto
</div>
<div class="maincontent">
test
</div>
</body>
</html>
Voici le rendu :

Il est satisfaisant en terme de placement par contre j'ai un problème avec la longueur des mes div menucontent et maincontent.
Comment spécifier une longeur ? la partie à gauche est fixe en terme de pixels à cause du logo et si je mets 70%, l'espace tout à droite va varier selon la résolution. Si je mets 100%, le div est fatalement trop grand.

Je ne vois pas très bien comment procéder