Comment faire pour que ma colonne central s'adapte

**pierrot10** · 10/04/2011, 22h50

Bonjour,
J'ai 3 div que je veux en colonne, de manière donc à avoir 3 colonnes :o).
La colonne de gauche aura une largeur et celle de droite aussi. Normalement identique.

Ma question est concernant la colonne du centre. Cette derniere sera plus large car elle contiendra le contenu des pages.

Simplement dans certaines pages, la colonne de droite ne sera pas exploitée, donc elle aura une largeur de 0px (ou 1px).

je souhaiterais sasvoir comment faire pour que ma colonne central s'adapte toujours en fonction de la largeur de la colonne de droite, mais si elle devait avoir une largeur différente que la colonne de gauche.

A la base je pensasi travailler avec un float, mais je dois vous avouer que je n'ai pas d'idée pour arriver à mon but.

Merci pour vos lumières

**vodiem** · 11/04/2011, 03h12

salut pierrot10,

ex:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head> 
<style type="text/css">
#gauche {
width:200px;
height:200px;
float:left;
background-color:#3332CC;
}
#centre {
width:100%;
height:200px;
float:left;
background-color:#eee;
}
#droite {
width:100px;
height:200px;
float:right;
background-color:#FE0000;
}
</style>
</head>
<body>
<div id="centre">
centre
<div id="gauche">
colonne de gauche
</div>
<div id="droite">
colonne de droite
</div>
</div>
</body>
</html>

**pierrot10** · 18/04/2011, 20h10

Salut,
Merci pour ta réponse.
Le problème c'est je veux mettre de bordure dans la 3 div

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#gauche,#centre,#droite{
border:1px solid #cccccc;
}

Le problème, dans ton exemple, on verra que la bordure de #centre va englober les deux autres.
Alors que je souhaite avoir 3 bloc en colonne, qui ont un border:1px solid #ccc, et un margin:5px.

**Ceddoc** · 19/04/2011, 08h54

edit: répondu trop vite je relis la discussion et j'édite ce message si je trouve une solution sinon à supprimer

edit2: pas trouvé de solution "facile" mais des fois je me dit que même si les tableaux c'est pas bien ben la... ce serait vite réglé avec quelquechose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<table cellpadding=0 cellspacing=0 id="maintable">
<tr>
<td id="gauche">ta colonne gauche</td>
<td id="centre">ta colonne centrale</td>
<td id="droite">ta colonne droite</td>
</tr>
</table>

et comme css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#maintable {
border:none;
width:100%;
}
 
td#gauche {
border:1px solid #000;
width: 200px;
}
 
td#centre{
border-width:1px 0px 1px 0px;
 
}
 
td#droite{
border:1px solid #000;
}

En espérant t'avoir aidé

**pierrot10** · 19/04/2011, 10h34

Salut,

Merci pour ta réponse.
Ben oui pour le moment, je le fais avec des tableaux

**Ceddoc** · 19/04/2011, 10h45

Et il y a quelque chose qui ne marche pas bien ou qui te bloque? ou c'est juste par acquis de conscience que tu cherche à le faire avec des divs?

**Bisûnûrs** · 19/04/2011, 10h45

A mon avis tu peux t'inspirer de ça :
http://covertprestige.info/css/exemp...nnes-factices/

**pierrot10** · 19/04/2011, 11h11

Ben un petit peu des deux

Ce qui me bloque, c'est que j'aimerais avoir 3 bloques

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
div.glob{width:500px;}
table.table_3_col td{
	-moz-border-radius-topleft : 5px; 
	-moz-border-radius-topright : 5px; 
	-moz-border-radius-bottomleft : 5px; 
	-moz-border-radius-bottomright : 5px; 
	-webkit-border-top-left-radius : 5px;
	-webkit-border-top-right-radius : 5px;
	-webkit-border-bottom-left-radius : 5px;
	-webkit-border-bottom-right-radius : 5px;
	border:1px solid #cccccc;
}

Il faudrait que
1) La col ne gauche soit toujours collée au div parent (.glob) avec une largeur fix
2) La col de droit soit toujours collée au div parent (.glob), mais à sa droite
3) que mon ma col de droite d'adapte eb fonction des largeurs de la col de gauche et de droite, si elle devait changé.
4) MAIS SURTOUT, et c'est notamment ca que je cherche à faire et que je ne n'arrive pas à faire avec un tableau, c'est que mes trois colonne ait un cadre (border:1px solid #cccccc

MAIS que la colonne du centre soit séparé de 5px.

Un peu comme si je mettais trois div en

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

float:left

et pour le div du centre

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0px 5px 0px 5px;

Vous voyez?

En résumé,
Avec des div, je epux les aligner, séparé mon div du centre avec des margin:0px 5px 0px 5px, faire en sorte que mon div de droite, soit collé à droite de son div parent, mais je n'arrive pas à ce que la largeur du div central s'adapte en fonction du div de droite.

Avec un tableau, j'y arrive, mais là, je n'arrve pas a avoir

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0px 5px 0px 5px;

sur la cellule du centre.

Voilà, j'espère que j'ai été assez claire?
Merci
avec

**Ceddoc** · 19/04/2011, 11h20

La solution sale pour le tableau ce serait de rajouter des cellules vide entre la cellule gauche et la cellule centrale et entre la celulle centrale et la cellule droite. ces cellules "écarteuses" seraient vide, sans bord et avec une largeur de 5px pour remplacer ton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0px 5px 0px 5px;

La solution propre pour l'un ou l'autre je suis curieux de la connaître

**pierrot10** · 19/04/2011, 11h43

Ha ben oui, ben je voulais justement éviter les cellules écarteuses

**vodiem** · 19/04/2011, 11h58

tu veux parler de border-spacing ?

**Ceddoc** · 19/04/2011, 12h01

ah oui en effet avec un border spacing sur la cellule du milieux ça peut le faire.

**pierrot10** · 19/04/2011, 13h23

Bonjour,
Ben c'est pas mal du tout.
Je m'excuse dêtre un peu pointilleux, mais le seul probleme qu'il se pose, que qu'il y a un "margin" gauche sur ma col de gauche. J'aurai préféré qu'elle soit aligné avec le texte.

A moins que je me trompe, le

border-spacing

n'agit que tu la <table> et pas le <td>.

Si ca pouvait agir que sur le <td> du centre, ca serait top.

Mais bon, pour le moment ca va.
Merci

Comment faire pour que ma colonne central s'adapte

Tableau en CSS

Discussions similaires

Partager

Partager