Taille d'une div dynamique [Résolu]

Salut à tous !
Tout d'abord, (vu que c'est mon premier post) super site !
J'y viens souvent et je trouve quasiment toujours réponse à mes questions.

Certes sauf ce coup-ci sinon je n'aurais pas créé un post pour cela.


J'ai un petit souci , peut être est il simple à résoudre mais je ne connais pas l'astuce.

J'ai une page web organisée simplement :
Un gros bloc central appelé page fixé a 990px de large qui contient deux blocs en float left accueil_left et accueil right de largeur fixe chacun.

En gros comme ceci :

<div id="page">
<div id="accueil_left" style="float:left;width:210px;">
</div>
<div id="accueil_right" style="float:left;width:760px;">
</div>
</div>

La partie de gauche va accueillir des boutons (elle ne sera donc jamais pleine)
La partie de droite à un contenu variable et donc s'étend suivant celui-ci.

Mon souci est que j'aimerais que le bloc de gauche ait une taille minimum (ca c'est faisable) mais qu'il s'étende pour faire la même taille que le bloc de droite alors qu'il n'y a rien dedans.

J'ai essayé de mettre la hauteur en automatique, elle s'adapte à son contenu, inherit n'a pas fonctionné non plus, les pourcentages non plus.

Quelqu'un aurait il une idée?

Merci à tous
Modifié par Thade (09 Aug 2010 - 15:59)

Bonjour,

Renseigne toi sur la technique des "colonnes factices".

J'ai plus ou moins le même problème que Thade et je pense connaitre la technique des "colonnes factices" (http://www.alistapart.com/articles/fauxcolumns/)

Cependant, j'ai bien peur que cette technique ne soit un peu lourde si l'on souhaite des "border-bottom" sur chacun des 2 blocks (image ci dessous)



Avec la technique des colonnes factices, j'ai bien peur qu'il faille ajouter un div "bottom" avec pour background, une image faisant apparaitre les "bottom" des 2 blocks.

Dans mon cas particulier, cela ne m'arrange pas du tout de devoir utiliser cette méthode .

Qu'est-ce que vous me conseillez ?
Faire le bourrin avec cette méthode ou existe-t-il un autre moyen ?

Si c'est pour des raisons de background derriere ta colonne, tu peux faire cela :

<div class="conteneur">
<div class="background-colonne"></div>
<div class="colonne-gauche"></div>
<div class="colonne-droite"></div>
</div>

.conteneur {width:990px;position:relative;}
.background-colonne{width:220px;position:absolute;top:0;left:0;background:#ccc;height:100%;}
.colonne-gauche{width:210px;float:left;position:relative;}
.colonne-droite{width:760px;float:right;}

Modifié par mlbcreation (06 Aug 2010 - 18:14)

Ta technique est pas mal, merci d'ailleurs
(j'ajouterais qu'il faut penser à donner une taille à "conteneur" (%, px, ...))

Personnellement, elle ne me convient pas car je souhaiterais que mes colonnes est réellement la même hauteur.

Je viens de trouver une autre technique (c'est bourrin aussi et j'ai pas encore testé la compatibilité):

<div class="tabled">
    <div class="rowed">
        <div class="celled">azerty</div>
        <div class="celled">azerty<br />azerty</div>
    </div>
</div>

div.tabled {
    display: inline-table;
    border-collapse: separate;
    table-layout: fixed;
}
div.rowed {
    display: table-row;
}
div.celled {
display: table-cell;
}

Pour quelle raison souhaites tu que les deux divs aient exactement la même hauteur ?

euh... parce que je suis tétu

Ca fait 5 minutes que je réfléchis au pourquoi je veux qu'elles aient la même hauteur

Je vais donc exposer clairement mon soucis, ce sera surement plus parlant.

L'image ci-dessous illustre mon objectif d'intégration et les contraintes sont les suivantes (utilisation d'un CMS):
* ALPHA_TITRE et ALPHA_CONTENU doivent être dans un même block
* BETA_TITRE et BETA_CONTENU doivent être dans un même block
* Les blocks Alpha et Beta doivent avoir une hauteur dynamique et égale (tout du moins, en apparence).



Je suis peut être un peu fatigué mais je sèche complètement

Tu peux mettre la colonne de gauche en absolute, avec une hauteur de 100% et une largeur de 220px et ton contenu principal en static avec une marge gauche de 220px meme si ce n'est pas totalement propre

Il y a déjà ça dans les gabarit Alsa :
http://www.alsacreations.com/static/gabarits/modele06.html

Merci , pour moi ca fonctionne impeccable merci beaucoup
Bonne continuation et bon développement à tous

Bonjour,

Le problème est donc [résolu] ?

exact =)
Désolé , j'ai pas le réflexe
Bonne continuation à tous =)