Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS : 3 colonnes avec la colonne du milieu fixe ?

21 réponses
Avatar
Mr Prout !
Salut !

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".

Il me paraît cependant étonnant que mon problème, que je vais mentionner
ci-dessous, ne soit pas réalisable en CSS. Le voici :

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.

<------------- 100% ------------>
+------------ BODY -------------+
| | | |
| | | |
|gauche | MILIEU |droite |
| | 500 px | |
| | | |
| | | |
| | | |
+-------------------------------+

Qu'en pensez-vous ? est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?


Merci d'avance pour votre réponse. ;-)

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr

10 réponses

1 2 3
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne, Mr
Prout ! ecrit ce qui suit en ce 11/02/2009 16:58 :
Salut !



Yo !

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".



Beurk !

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.
est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?



En faisant un contenant (une boîte, quoi) dans lequel tu enfermes les 3
autres.
Le gauche en float:left et le droite en ... float:right en précisant la
dimension du central.
En jouant sur les min-width et le max-width, c'est jouable.

Mr Prout !



Heureusement qu'il n'y a pas l'odeur ! ;-)

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Mr Prout !
La nouvelle vedette du web, docanski, a écrit :

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.
est-ce réalisable en CSS, sachant que ceci doit fonctionner sur tous
les navigateurs ?



En faisant un contenant (une boîte, quoi) dans lequel tu enfermes les 3
autres.
Le gauche en float:left et le droite en ... float:right en précisant la
dimension du central.
En jouant sur les min-width et le max-width, c'est jouable.



Salut, et merci pour ta réponse !

Mais ça n'a pas l'air de fonctionner, voici le code que j'ai utilisé en
reprenant ton idée (sachant que ma colonne du milieu doit être forcément
centrée) :

Le code XHTML :
---------------
<div id="conteneur">
<div id="droite">droite</div>
<div id="gauche">gauche</div>
<div id="milieu"></div>
</div>

Et le CSS :
-----------
div {
height:450px;
}

#conteneur {
background:blue;
}

#gauche {
background:yellow;
float:left;
}

#droite {
background:red;
float:right;
}

#milieu {
width:900px;
background:green;
margin:0 auto;
}

Comme tu peux le voir (car je parie que tu as immédiatement testé en
voyant mon code ! :-P), je suis obligé de mettre un texte dans les
colonnes de gauche et droite pour les rendre visible. Or ce n'est pas le
but, car les largeurs de ces colonnes devraient s'ajuster
automatiquement par rapport à la largeur de la fenêtre du navigateur, et
donc être "collées" à la colonne du milieu.
Une autre solution, docteur ?

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
Avatar
Olivier Miakinen
Le 11/02/2009 17:34, docanski répondait à "Mr Prout !" :

[...]

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".



Beurk !



Eh oui : beurk, mais je ne crois pas qu'il existe d'autre solution en
CSS 2 ou 2.1. C'est comme pour avoir trois colonnes dont la hauteur
s'adapte automatiquement à celle de la colonne la plus haute (et sans
tricher avec un simple fond de couleur).

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.
est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?





Je ne crois pas. Peut-être en CSS 3, mais même si c'est le cas il faudra
attendre un moment avant que ce soit supporté sur tous les navigateurs.

En faisant un contenant (une boîte, quoi) dans lequel tu enfermes les 3
autres.
Le gauche en float:left et le droite en ... float:right en précisant la
dimension du central.
En jouant sur les min-width et le max-width, c'est jouable.



C'est seulement jouable, ou bien tu as déjà réussi à le faire marcher ?
Moi je crois que ça ne peut pas fonctionner.
Avatar
CrazyCat
Mr Prout ! wrote:
Comme tu peux le voir (car je parie que tu as immédiatement testé en
voyant mon code ! :-P), je suis obligé de mettre un texte dans les
colonnes de gauche et droite pour les rendre visible. Or ce n'est pas le
but, car les largeurs de ces colonnes devraient s'ajuster
automatiquement par rapport à la largeur de la fenêtre du navigateur, et
donc être "collées" à la colonne du milieu.
Une autre solution, docteur ?



ajouter un display:block; à tes 2 colonnes ?

--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne, Mr
Prout ! ecrit ce qui suit en ce 11/02/2009 18:26 :

Mais ça n'a pas l'air de fonctionner,



Ceci :

<div
style="min-width:50%;background:lightyellow;margin-left:25%;margin-right:25%">blabla</div>
<div
style="width:25%;background:lightblue;float:left;margin-right:0;margin-top:-1em">blabla</div>
<div
style="width:25%;background:lightblue;float:right;margin-left:0;margin-top:-1em">blabla</div></div>

fonctionne aussi bien sous Firefox qu'Opera et K-Meleon que MSIE 6.x.
Pas besoin, finalement, de contenant. Le décalage horizontal des 3 blocs
est à régler avec le "margin-top".

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
docanski ecrit ce qui suit en ce 11/02/2009 23:24 :

Pas besoin, finalement, de contenant.



Petit oubli : j'avais zappé la phrase où tu disais qu'il fallait mettre
du texte pour "ouvrir" les boites.
En fait, tu changes alors "blabla" par "&nbsp;"
Il n'est pas interdit de tricher une peu, s'pas ... ;-)

Cordialement,


--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
SAM
Le 2/11/09 11:06 PM, Olivier Miakinen a écrit :
Le 11/02/2009 17:34, docanski répondait à "Mr Prout !" :
[...]

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".


Beurk !



Eh oui : beurk, mais je ne crois pas qu'il existe d'autre solution en
CSS 2 ou 2.1.



M'enfin c'est pas si compliqué ...

on faut 2 colonnes :
- gauche de largeur 70% par exemple
- droite avec marge gauche de 71%
et peut-être en absolute ?
mais je pense que c'est mieux de faire celle de gauche en absolute.

Dans celle de gauche on met :
- une colonne de 500px de large et flottante à droite
- le reste de la colonne "gauche" sera la colonne gauche


+------------------------------------------++-----------+
| div absolute et largeur 70% || div normal|
| +----------------------------+|| marge |
| | div de 500 px de large ||| gauche |
| | float right ||| 71% |
| col gauche | ||| |
| | ||| |


Mais non ... ça marchera pô,
même si les col gauche et droites sont de largeurs élastiques,
ces largeurs ne seront pas égales.

Ce "truc" pourrait fonctionner si toutes les col étaient en largeurs
élastiques (du moins pense-je)

En faisant un contenant (une boîte, quoi) dans lequel tu enfermes les 3
autres.
Le gauche en float:left et le droite en ... float:right en précisant la
dimension du central.
En jouant sur les min-width et le max-width, c'est jouable.



C'est seulement jouable, ou bien tu as déjà réussi à le faire marcher ?
Moi je crois que ça ne peut pas fonctionner.



Ben ... pour sûr !
Ce ne sont pas les min/max qui vont faire que les right et left
resteront de largeurs égales.

Et puis d'abord c'est pour quoi faire au final cette demande ?

Parce que si c'est pour avoir une image ou une couleur de fond
différente à droite et à gauche et une colonne centrale centrée et de
largeur fixe, ça ce doit être possible.

--
sm
Avatar
Michael DENIS
SAM a écrit :
Et puis d'abord c'est pour quoi faire au final cette demande ?



C'est un peu la question que je me posais aussi... :-)

--
Michaël DENIS
Avatar
Mr Prout !
La nouvelle vedette du web, Michael DENIS, a écrit :
SAM a écrit :
Et puis d'abord c'est pour quoi faire au final cette demande ?



C'est un peu la question que je me posais aussi... :-)




Ca m'étonne que l'on ne me l'aie pas posée avant ! ;-)
C'est pour intégrer un site ayant des éléments visuels qui dépassent à
gauche et à droite du cadre principal, tout en étant "collés" à ce
dernier. Ces éléments visuels ne sont pas primordiaux à la navigation et
peuvent être masqués lorsque le visiteur a une petite résolution
d'écran, de manière à afficher QUE le conteneur principal.
Et comme je comptais mettre ces éléments en background-image dans les
colonnes gauche et droite, ceux-ci auraient été automatiquement masqués.
La colonne du milieu - à savoir le conteneur principal - doit quant à
elle rester fixe sur sa largeur.

Si vous aviez toutefois une autre solution pour ma demande, je suis
toujours preneur ;-)

@ bientôt !
Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
Avatar
Mr Prout !
La nouvelle vedette du web, CrazyCat, a écrit :
ajouter un display:block; à tes 2 colonnes ?



Inutile, ce sont des <div>, qui sont donc en display:block par défaut.

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
1 2 3