Blocs verticaux qui se compensent ?

Bonjour à tous

Je voudrais créer une structure avec 4 blocs :
- un horizontal à largeur 100% en haut
- une colonne à gauche à largeur 50% au milieu
- une colonne à droite à largeur 50% au milieu
- un horizontal à largeur 100% en bas

En mettant des width en dur, c'est assez simple. Le souci, c'est ce je voudrais que pour mes deux colonnes du milieu ...

A savoir que si la colonne de droite est vide, le contenu de celle de gauche prend toute la largeur et si la colonne de gauche est vide, celle de droite prend toute la largeur ...
Et bien entendu, si les deux colonnes sont remplies, elles restent à 50% de la largeur les deux.

Et là, ça se complique, je vois pas trop comment faire :s

Des idées ?

Merciiiiii !!!
Modifié par kiouz (06 Aug 2009 - 15:15)

Pour info, j'ai tenté ca, mais ca marche pas :

<div id="content">
   <div id="block_top">
<p></p>
   </div>

   <div id="block_left">
<p></p>
   </div>

   <div id="block_right">
<p></p>
   </div>

   <div id="block_bottom">
<p></p>
   </div>

</div>

#content
{
position:relative;
top:30px;
width:650px;
left:250px;
padding:0 0 0px 0;
}
#block_top
{
height:120px;
width:630px;
padding:10px 0px 0px 20px;
overflow:hidden;
border:solid 1px #ff0000;
}
#block_left
{
display:inline;
min-width:50%;
float:left;
padding:10px 0px 0px 20px;
border:solid 1px #ff0000;
}
#block_right
{
display:inline;
min-width:50%;
float:right;
padding:10px 0px 0px 20px;
border:solid 1px #ff0000;
}
#block_bottom
{
height:120px;
width:630px;
padding:10px 0px 0px 20px;
overflow:hidden;
border:solid 1px #ff0000;
}

Bonjour,

S'il n'y avait qu'une colonne sur deux qui peut être vide, ça se gèrerait avec un contexte de formatage:

#gauche {
  float: left;
  width: 50%;
  background: red;
}
#droite {
  overflow: hidden; /* contexte de formatage */
  zoom: 1; /* HasLayout pour retrouver le même comportement dans IE6 */
  background: blue;
}

Si la colonne de gauche est absente, celle de droite prend toute la largeur (width:auto). Si elle est présente, elle repousse la colonne de droite qui prend la largeur restant disponible.
On peut aussi avoir l'effet inverse en positionnant l'élément flottant (qui doit être placé en premier dans le code HTML) à droite.

Par contre pour réagir au fait que l'un ou l'autre puisse être vide (plutôt qu'absent du code HTML), là ça va demander un peu de logique programmatique. Donc soit tu utilises le langage côté serveur ou ton système de template pour générer des classes ou identifiants différents suivants les cas:

<div id="column1" class="column full">Du contenu</div>
<div id="column2" class="column empty"></div>

ou bien:

<!-- Rien -->
<div id="column2" class="column full">Du contenu</div>

ou encore:

<div id="column1" class="column normal">Du contenu</div>
<div id="column2" class="column normal">Du contenu</div>

Soit tu gères ça côté JavaScript mais a) c'est moins fiable (cas où JavaScript est désactivé) et c'est quand même plus compliqué je trouve.
Modifié par Florent V. (06 Aug 2009 - 17:30)

Sinon si tu peux ne pas créer les éléments vides, tu peux jouer avec ça:

<div id="colums">
  <div class="column"></div>
  <div class="column"></div>
</div>

#columns {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
#columns > .column [
  display: table-cell;
}
#columns > .column + .column {
  width: 50%;
}

Par contre bonjour la compatibilité.

Merci pour ton aide, effectivement, en faisant comme cela, si il n'y a rien à la place du div de gauche, cela fonctionne.

Par contre, je construit tout cela avec Typo3, qui n'est pas très souple, donc c'est pour cela que je voulais trouver une solution entièrement en CSS.

Mais si j'ai pas le choix ...

Sympa la 2e méthode, mais effectivement, le site doit être compatible IE6, FF 2 et FF 3 donc c'est mort