[HTML,CSS] Synchroniser la taille de deux colonnes

Synchroniser la taille de deux colonnes [HTML,CSS] - HTML/CSS - Programmation

Marsh Posté le 21-03-2003 à 09:00:56    

Bonjour !
 
J'essaie de synchroniser la taille de deux colonnes en utilisant des CSS.
 
Voici mon CSS j'usqu'a present :
 

Code :
  1. body{text-align:center;background:#000;margin:0;padding:0;color: #fff;}
  2. #frame {
  3.  width:760px;
  4.  margin-right:auto;
  5.  margin-left:auto;
  6.  margin-top:10px;
  7.  padding:0px;
  8.  text-align:left;
  9.  background:#fff9eb;
  10.  color: #000;
  11.  }
  12. #frame img{display:block;}
  13. #contentheader {
  14.  width:602px;
  15.  height:61px;
  16.  background:#fff9eb;
  17.  color: #000;
  18.  }
  19.     #contentupleft {
  20.  width:158px;
  21.  height:900px;
  22.  padding:0px;
  23.  float:left;
  24.  background:#fff9eb;
  25.  color: #000;
  26.  }
  27. #contentupright{
  28.  width:602px;
  29.  height:85px;
  30.  padding:0px;
  31.  float:right;
  32.  background:#fff9eb;
  33.  color: #000;
  34.  }
  35. #contentmiddleright{
  36.  height:403px;
  37.  width:602px;
  38.  padding:0px;
  39.  float:right;
  40.  background:#fff9eb;
  41.  color: #000;
  42.  }
  43. #content{
  44.  height:400px;
  45.  width:579px;
  46.  padding:0px;
  47.  float:left;
  48.  background:#fff9eb;
  49.  color: #000;
  50.  border:3px solid #990000;
  51.  }
  52. #contentdownright{
  53.  height:37px;
  54.  width:602px;
  55.  padding:0px;
  56.  float:right;
  57.  background:#fff9eb;
  58.  color: #000;
  59.  }
  60. </style>


 
que je construit ainsi :
 

Code :
  1. <div id="frame">
  2. <div id="contentheader"><img src="images/ocbase_03.gif" width="760" height="61" alt=""></img></div>
  3. <div id="contentupleft"><img src="images/ocbase_05.gif" width="158" height="419" alt=""></img></div>
  4. <div id="contentupright"><img src="images/ocbase_06.gif" width="602" height="85" alt=""></img></div>
  5. <div id="contentmiddleright">
  6.  <div id="content">Coming soon ! Stay tuned !</div>
  7. </div>
  8. <div id="contentdownright"><img src="images/ocbase_08.gif" width="602" height="37" alt=""></img></div>
  9. </div>


 
http://www.ifrance.com/tetedetcha/shot1.gif
 
Comme vous pouvez le voir, j'ai un header, et en dessous deux colonnes : une pour mon menu ( contentupleft), et une pour le contenu ( composee de contentupright, contentmiddle right et de sa fille content, ainsi que de contentdownright, en footer).
 
Le contentupright a une taille variable et depend du texte que je vais afficher.
 
Voici mon souci :
 
Sous mozilla ( comme sur le screenshot ), le carre forme par le bas du menu et le cote du footer est vide ( noir quoi). Je voudrais qu'il soit blanc.
 
Probleme : la taille de mon cadre "content" peux varier a volonte.
 
Comment synchroniser les deux afin d'avoir un joli carre ? dans tous les cas ?
 
Merci :jap:


Message édité par Tetedeiench le 21-03-2003 à 09:03:33
Reply

Marsh Posté le 21-03-2003 à 09:00:56   

Reply

Marsh Posté le 21-03-2003 à 09:03:15    

PS : le screenshot est pas bien centre ( marge gauche != marge droite). C'est pas le cas sur mon mozilla ( j'ai mal fait le decoupage quoi).
 
PS2 : sous IE pas de souci. c'est sous moz que ca chie.

Reply

Marsh Posté le 21-03-2003 à 10:42:36    

C'est normal. Un bloc flottant sort du flux normal (voir la FAQ) donc ce n'est pas ton div#contentupleft qui impose sa taille à #frame en dépit de sa hauteur démesurée.
 
Tu dois ajouter ajouter un div tout en bas et dont le rôle est d'étirer en hauteur #frame :
 

<div class="spacer">& nbsp;</div>
 
.spacer {
  clear: both;
}


Message édité par gm_superstar le 21-03-2003 à 10:43:02

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed