Découpage d'une interface css

voilà j'ai crée une interface web en découpant ma page avec des feuilles de style de cette façon :

.body {
background-color:#765;
margin:0;
font-family : verdana , arial, sans-serif;
font-size :80%;}

.head1 {
width : 920px;
height : 150px;
position:relative;
text-align:bottom;
left:180px;
right:10%;
text-align:bottom;
}

.gauche_haut {
width:170px;
height:150px;
position:absolute;
right:950px;
top:0;
left:5px;
}

.logo
{
float: left; /* alignement du logo à droite */
margin-left: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;

}
.gauche
{
position:absolute;
margin-right:2000px;
left:5px;
width: 170px;
height: 75%;
top:150px;
background-color:white;
}

Il se pose un problème : lorsque par exemple j'écris du texte trop dans ma boîte de gauche elle vient se placer derrière ma boîte du centre et je ne vois pas tout le texte affiché.
En fait j'aimerais créer des boîtes fixes et que mon texte aille systématiquement à la ligne.
Cela vient-il des position??? ........
Merci d'avance

Humm bonjour ?

Salut, bienvenue à toi, je t'invite à aller te présenter dans le bar http://forum.alsacreations.com/topic.php?fid=9&tid=23&p=9

Pour ton problème, le code html correspondant serait le bienvenue aussi , si tu as un exemple en ligne, il serait très utile aussi pour bien identifier le problème.

Voilà pour ce qui est du code HTML :

<div class="head1"> 
<div align="center">
<font color="#FFFFFF"><font size="3"><strong>
Institut de Recherche en Communications et en Cybernétique de Nantes <br>
IRCCyN - 1, rue de la Noë - BP 92 101 - 44321 Nantes CEDEX 03 - Fax : 02 40 37 69 30
</strong></font></font>
</div>

Je précise que malgré tout mon interface n'en est qu'au stade projet.
  

  <div id="header"> 
    <ul>
      <li  id="ong1" span class="current" onclick="changeOnglet(1);"> <a href="index.php">Accueil</a></li>
      <li  id="ong2" onclick="changeOnglet(2);"> <a href="thematique.php">Thématiques</a></li>
      <li  id="ong3" onclick="changeOnglet(3);"><a href="membres.php" >Membres</a></li>
      <li  id="ong4" onclick="changeOnglet(4);"><a href="projets.php" >Projets</a></li>
      <li  id="ong5" onclick="changeOnglet(5);"><a href="theses.php">Thèses</a></li>
      <li  id="ong6" onclick="changeOnglet(6);"><a href="publi.php">Publications</a></li>
      <li  id="ong7" onclick="changeOnglet(7);"><a href="outils.php">Outils</a></li>
      <li  id="ong8" onclick="changeOnglet(8);"><a href="demonstrateurs.php">Démonstrateurs</a></li>
    </ul>
  </div>
</div>
<div class="gauche_haut">
<img src="images/irccyn.jpg"></div>

<div class="gauche">cccccccccccc</div>
<div class="centre"> 
  <div align="center" > <font color="#000080"><font size="7"><strong>Plate-Forme</strong></font></font><BR>
    <font color="#004080"><strong><font size="5">Ingénierie Virtuelle pour le 
    Génie Industriel</font></strong></font><br>
    <br>
    <br>
    <strong>Objectifs de la plate-forme :</strong> </div>
  <ul style="margin-left:45%">
    <LI>Thématiques</LI>
    <li>Membres</li>
    <li>Projets</li>
    <li>Thèses</li>
    <li>Publications</li>
    <li>Outils</li>
    <li>Démonstrateurs</li>
  </ul>
  <div id="texte1" style="display:block"></div>
  <div id="texte2" style="display:none">Membres</div>
  <div id="texte3" style="display:none">Projets</div>
  <div id="texte4" style="display:none">Thèses</div>
  <div id="texte5" style="display:none">Publications</div>
  <div id="texte6" style="display:none">Outils</div>
  <div id="texte7" style="display:none">Démonstrateurs</div>
  <div id="texte8" style="display:none">accueil</div>
</div>
</body>
</html>

Je vous envoie une image de mon interface. Par exemple l'image que j'insère à gauche_haut déborde dans mon head1 et le texte dans mon bloc de gauche s'efface dans mon bloc du centre.
Merci d'avance.

Raphael a écrit :
Humm bonjour ?

Bonjour, Aurais-tu quelques idées??
Je ne vois vraiment pas comment faire pour empêcher que mes blocs se superposent! Je me perds dans les position absolute et relative, les float!!!
Marci d'avance