Soucis de superposition de float

bonjour

j'ai un petit soucis de superposition

j'ai un site avec deux colonnes, de taille variable, suivit par un autre block prenant la largeur de la page ( la page c'est http://loeal.free.fr/enigmes )
pour que les deux colones ai l'air d'avoir la meme taille j'utilise l'astuce du fond avec une image

voici la structure de la page:

<div id=mainblock>
<div id=content> contenu s'affichant sur la gauche </div>
<div id=right> menu sur la droite </div>
</div>
<p class=block> contenu s'affichant apres le mainblock </div>

avec le css joint

div#mainblock {
  width:100%;
  position:relative;
  background: url(...) repeat-y 50% 0;
}

div#content {
  width: 729px;
  float: left;
}

div#right {
  float: right;
  width: 220px;
}

p {padding: 6px ;}

p.block {
  margin-bottom: 1px;
  position: relative;
  text-align: left;
  background-color: #363f52;
}

sous IE/windaube ca roule pas de soucis le block du bas se met a la ligne (ce qui m'etonne mais bon ^^)
sous firefox parcontre le block sense s'afficher en bas s'affiche sur tout le bazard. ( en passant le div mainblock, son fond ne s'affiche pas), ce qui me parait logique car mainblock ne contient que des flotant.

mais alors la question comment faire pour que sous les deux navigateur la page s'affiche correctement ?
Modifié par lo(ea)l (12 Jul 2007 - 15:02)