28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un soucis dans la création de mon design.
Je cherche à faire un design extensible, mais limité entre un max et un min.
J'ai donc un div conteneur avec une largeur de 80% et un max-width/min-width. Dans ce div, j'ai deux colonnes. Je souhaiterai que la première, celle de gauche, soit extensible, et celle de droite fixe.

http://uploads.siteduzero.com/files/367001_368000/367600.jpg

J'avais réussi à faire l'inverse (colonne de gauche fixe et celle de droite extensible) en jouant avec les floats, width et margin, mais dans le sens voulu ici (rappel : gauche extensible droite fixe), rien à faire, je n'y arrive pas. Soit les tailles sont bonnes mais les blocs ne sont pas sur la même ligne, soit j'ai tout sur la même ligne mais ma colonne extensible n'occupe pas du tout le maximum d'espace possible...

Quelqu'un pourrait-il m'aider ? Merci d'avance.
Modifié par Lucky-Strike (12 Mar 2012 - 16:07)
Modérateur
Bonjour, cela ressemble au comportement d'un tableau.

Pour les navigateurs récents, des display: table-row /table-cell /table devraient résoudre le problème.
Pour les plus anciens (ie 7 et avant), et bien tout simplement table
Hello.

Pas besoin de tableau, il faut juste que la colonne fixe soit placé avant la colonne fluide dans le HTML, et qu'elle soit en float: right.

J'ai fait un petit Dabblet illustrant la chose.

EDIT: Je viens de me rappeler l'existence de ce gabarit avec sensiblement le même code.
Modifié par Florian_R (12 Mar 2012 - 16:29)
Mince alors, j'avais le bon code/CSS mais pas dans le bon ordre alors ! Ma fixe était après l'extensible dans le code HTML...
Je teste en rentrant, mais le lien que tu proposes correspond parfaitement, alors je suis plutôt confiant !

Merci beaucoup.

EDIT : Merci, c'est parfait !
Modifié par Lucky-Strike (12 Mar 2012 - 21:14)