Bonsoir,
Voici une solution basique pour le modèle de mise en page que tu envisages.
Je te détaille les différentes propriétés de style avec un commentaire:
Tu as a priori besoin d'un bloc centré, voici une méthode qui permet de centrer un bloc en css (un lien explicatif de Raphaël est dans les commentaires:
#conteneur{
position:absolute;/*voir [url=http://www.alsacreations.com/articles/centrer/]Centrer les éléments ou un site web en CSS[/url]*/
left: 50%;
top: 3%;
width: 80%;
margin-left: -40%;
border: 1px solid #000;
background:#fff;
}
Le cas des 2 (ou plus) boîtes décalés à gauche, je te propose un bloc qui contiendra d'autres éléments, je part du principe que les blocs que tu souhaites ont trait à la navigation, ce seront des listes (ul):
#navig{
position:absolute;/*mode de positionnement*/
width:150px;/*largeur de l'élément*/
left:-50px;/*positionné à -50px du bord gauche de l'élément lui même positionné qui l'englobe (#conteneur)*/
top:80px;/*positionné à 80px du bord haut de l'élément lui même positionné qui l'englobe (#conteneur)*/
background:transparent;}
/*[url=http://openweb.eu.org/articles/initiation_absolue/]Initiation au positionnement CSS : 3. position absolue et fixe[/url]*/
Les blocs décalés en eux-même dans le cas où ce sont des éléments de navigation seront des listes (ul) contenu dans le bloc défini précédement à savoir #navig:
ul.menu{
background:#eee;/* il suffit d'appliquer cette class menu aux listes qui constituent les différentes parties de navigation*/
margin-bottom:2em;
padding:.5em;
border:solid 1px #eee;
}
Le contenu principal de ta page pourrait être contenu dans un autre élément que je nomme #contenu:
#contenu{margin-left:130px;/*une marge pour que ce qu'il contient ne soit pas en supperposition de #navig*/}
Précision, je n'ai défini des valeurs de marge que là où j'en avais besoin car j'utilise un sélecteur universel permettant de réduire à zéro toutes les marges internes et externes des éléments:
*{
margin:0;
padding:0}
Voici un exemple de code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-15" />
<title>
Titre
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
*{
margin:0;
padding:0;
}
body{
background: Blue;
font:1em/normal sans-serif;
color:#000;
}
#conteneur{
position:absolute;
left: 50%;
top: 3%;
width: 80%;
margin-left: -40%; /* moitié de la largeur */
border: 1px solid #000;
background:#fff;
}
h1{font-size:2em;}
li{list-style:none;}
p{margin-bottom:.8em;}
p,li{font-size:.8em;}
#contenu{margin-left:130px;}
#navig{
position:absolute;
width:150px;
left:-50px;
top:80px;
background:transparent;}
ul.menu{
background:#eee;
margin-bottom:2em;
padding:.5em;
border:solid 1px #eee;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="conteneur">
<h1>
Titre de ma page
</h1>
<div id="contenu">
<h2>
Un titre de 2<sup>nd</sup> niveau
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec lorem libero, iaculis ullamcorper,
consectetuer ut, dignissim vulputate, dolor. Duis ac
lacus. Maecenas dignissim ante vitae dui. Vivamus
lacinia feugiat arcu. Suspendisse pretium, velit et
semper nonummy, tortor elit blandit arcu, vitae
ultrices lectus quam nec felis. Aliquam porttitor
pharetra dolor. Ut vel odio. Nullam lacinia. Ut justo
dolor, nonummy et, interdum a, hendrerit ac, erat.
Donec sed ligula in elit consectetuer mollis. Fusce
wisi odio, imperdiet vel, luctus vel, blandit vitae,
quam. Nam at dolor quis dui molestie suscipit. Nunc
velit odio, molestie nec, hendrerit at, ullamcorper
non, wisi. Nullam gravida neque at leo. Integer luctus.
Aenean sed pede.
</p>
<h2>
Un titre de 2<sup>nd</sup> niveau
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec lorem libero, iaculis ullamcorper,
consectetuer ut, dignissim vulputate, dolor. Duis ac
lacus. Maecenas dignissim ante vitae dui. Vivamus
lacinia feugiat arcu. Suspendisse pretium, velit et
semper nonummy, tortor elit blandit arcu, vitae
ultrices lectus quam nec felis. Aliquam porttitor
pharetra dolor. Ut vel odio. Nullam lacinia. Ut justo
dolor, nonummy et, interdum a, hendrerit ac, erat.
Donec sed ligula in elit consectetuer mollis. Fusce
wisi odio, imperdiet vel, luctus vel, blandit vitae,
quam. Nam at dolor quis dui molestie suscipit. Nunc
velit odio, molestie nec, hendrerit at, ullamcorper
non, wisi. Nullam gravida neque at leo. Integer luctus.
Aenean sed pede.
</p>
</div>
<div id="navig">
<ul class="menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul class="menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</body>
</html>
et pointait un problème particulier. Je t'invite à le reformuler par exemple en "positionnement d'élément", libre à toi d'exprimer ton probème autrement. 
