[Résolu] Div 3 colonnes avec agrandissement de l'une d'entre elle

Bonjour,

Je suis à la recherche d'un modèle en CSS (Voir cf.)



Pour un site Internet avec 3 colonnes (hauteur à 100%) dont la largeur des 2 premières colonnes est fixe et la 3e étirable sur toute la largeur de l'écran.

Et je souhaiterais qu’apparaisse dans cette dernière une image qui s'allonge quelque soit la résolution de l'écran.

Est-ce possible ?

Merci pour vos conseils
Modifié par kiwoo (22 Dec 2011 - 09:49)

La solution la plus simple est l'utilisable du display:table / table-cell.

Ça aurait le comportement que tu souhaites ( hauteur des 3 colonnes identiques, capacité d'avoir deux colonnes fixes et une fluide )

Cependant, ce n'est supporté que dans les navigateurs récents.

Bonjour,


Une autre piste :

Tu places tes colonnes avec une taille fixe et alignées à gauche (elles ne bougeront pas)
Ensuite, tu donnes à ta troisième colonne une position relative ET une marge à gauche (margin-left) égale à la somme de la largeur de tes deux premières colonnes et SANS spécifier de largeur (width) (ni même "auto"). Ta troisième colonne commencera donc tout le temps après tes deux premières te prendra la largeur restante de l'écran.

Pour l'image, c'est une image avec des dimensions strictes ou un fond qui se répète ?
Dans les deux cas un width:100%; de l'image contenu dans la 3eme colonne devrait régler l'affaire je pense..
Modifié par _laurent (21 Dec 2011 - 17:04)

Merci pour vos conseils, j'ai essayé la méthode de Laurent et cela fonctionne parfaitement.

Je n'ai plus qu'à trouver un petit script ajax pour redimensionner l'image automatiquement dans ma 3e colonne

Quel effet veux-tu sur ton image ? Qu'elle se rogne/s'agrandisse ? Qu'elle s'étire/rétrécisse ? Qu'elle se répète ? Certaines solutions doivent pouvoir éviter simplement le js via du html/css

J'aimerais que mon image remplisse la colonne 3 en intégralité.
Je ne suis donc pas contre le fait qu'elle soit rognée si il y a possibilité qu'elle puisse remplir sans être déformée cette div.
Modifié par kiwoo (22 Dec 2011 - 13:03)

Pourquoi ne pas utiliser

background-image:url('dossier/image.png');

sur ta div ?
Modifié par _laurent (22 Dec 2011 - 13:41)

En fait j'aimerais que mon image s'agrandisse quelque soit la longueur ou largeur de la 3ème colonne et donc, suivant la résolution de l'écran

bah si tu la mets en background image je pense que ca aura le comportement que tu veux.. mais il la faut assez grande sinon elle va se répéter ou s’arrêter si l'écran est trop grand.