28172 sujets

CSS et mise en forme, CSS3

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. Smiley biggrin

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? Smiley langue

Merci à tous
Modifié par Thade (09 Aug 2010 - 15:59)
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)

upload/31591-blocks.jpg

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 Smiley decu .

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 Smiley cligne
(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;
}
Smiley confused euh... parce que je suis tétu Smiley biggrin

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

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).

upload/31591-blocks.jpg

Je suis peut être un peu fatigué mais je sèche complètement Smiley sweatdrop
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
Merci , pour moi ca fonctionne impeccable merci beaucoup Smiley biggrin
Bonne continuation et bon développement à tous Smiley cligne
Sujet clos
Aller à