[HTML,CSS] Synchroniser la taille de deux colonnes

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 :

body{text-align:center;background:#000;margin:0;padding:0;color: #fff;}
#frame {
width:760px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
background:#fff9eb;
color: #000;
}
#frame img{display:block;}
#contentheader {
width:602px;
height:61px;
background:#fff9eb;
color: #000;
}
#contentupleft {
width:158px;
height:900px;
padding:0px;
float:left;
background:#fff9eb;
color: #000;
}
#contentupright{
width:602px;
height:85px;
padding:0px;
float:right;
background:#fff9eb;
color: #000;
}
#contentmiddleright{
height:403px;
width:602px;
padding:0px;
float:right;
background:#fff9eb;
color: #000;
}
#content{
height:400px;
width:579px;
padding:0px;
float:left;
background:#fff9eb;
color: #000;
border:3px solid #990000;
}
#contentdownright{
height:37px;
width:602px;
padding:0px;
float:right;
background:#fff9eb;
color: #000;
}
</style>

que je construit ainsi :

Code :

<div id="frame">
<div id="contentheader"><img src="images/ocbase_03.gif" width="760" height="61" alt=""></img></div>
<div id="contentupleft"><img src="images/ocbase_05.gif" width="158" height="419" alt=""></img></div>
<div id="contentupright"><img src="images/ocbase_06.gif" width="602" height="85" alt=""></img></div>
<div id="contentmiddleright">
<div id="content">Coming soon ! Stay tuned !</div>
</div>
<div id="contentdownright"><img src="images/ocbase_08.gif" width="602" height="37" alt=""></img></div>
</div>

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

[HTML,CSS] Synchroniser la taille de deux colonnes

Sujets relatifs:

Leave a Replay