Comment étendre une colonne ?

Salut les CSSeux,

Je suis tout nouveau sur ce forum (qui m'a fortement aidé pour réaliser mon projet, merci la FAQ et les contributeurs ^^) mais je suis également nouveau en CSS. Pour être franc avec vous j'étais un grand fan des <table><tr><td> mais il fallait donc se mettre à la page donc le nouveau site est fait en CSS, XHTML.

J'ai une question car je ne sais pas du tout comment faire.

En fait, mon site se compose de 2 colonnes horyzontales. L'une est la partie centrale (700 px) et l'autre le menu (250px) englobant le tout dans une div "contenu2". Mais sur certaines pages, j'ai décidé de ne pas afficher le menu de droite, est-il possible d'étendre ma partie centrale à 100% lorsque je n'ai pas de menu ?

Ma partie CSS :

#contenu2 {background:#FFFFFF; float:left; margin-top:15px; margin-left:auto; margin-right:auto; width:990px; height:auto; padding:auto;}
#contenu-milieu {float:left; vertical-align:top; width:700px; margin-right:10px;}
#contenu-droit {float:right; top:0; width:250px;}

J'ai passé 2 H hier soir, mais bon

Merci d'avance et excellent week-end à vous (en plus il fait beau autant en profiter)
Modifié par Emilien59 (13 May 2008 - 12:06)

Bonjour,

il faut supprimer float:left; et width:700px; pour #contenu-milieu.
De plus, dans la structure de ta page, il faut d'abord traiter #contenu-droit puis #contenu-milieu.
Ce qui donne :
CSS

#contenu2 {background:#FFFFFF; float:left; margin-top:15px; margin-left:auto; margin-right:auto; width:990px; height:auto; padding:auto;}

#contenu-milieu {vertical-align:top; margin-right:10px;}

#contenu-droit {float:right; top:0; width:250px;}

HTML

<div id="contenu2">
	<div id="contenu-droit">
		...
	</div>
	<div id="contenu-milieu">
		...
	</div>
</div>

Bonjour,

On fera plutôt ceci:

#contenu2 {
	overflow: hidden; /* empêche le dépassement des flottants */
	width: 990px;
	margin: 15px auto 0 auto;
	background: white;
}
#contenu-droit {
	float: right; 
	width: 250px;
	margin-left: 10px;
	background: red;
}
#contenu-milieu {
	overflow: hidden; /* contexte de formatage qui force l'adaptation au bloc flottant de droite s'il est présent */
	zoom: 1; /* idem pour Internet Explorer 6 (à lui adresser via un commentaire conditionnel qui va bien) */
	background: blue;
}

La colonne de gauche (#contenu-milieu), pour peu qu'elle soit placée en deuxième dans le code HTML (après #contenu-droit), s'adaptera à la présence ou non de #contenu-droit.

Bonjour à tous et merci pour vos réponses.

Le code marche mais seul bémol lorsque la page est censée prendre 100% elle reste à la même largeur qu'auparavant.

Qu'en est-il ?

Merci d'avance et bonne journée

Emilien
Modifié par Emilien59 (12 May 2008 - 08:15)

Emilien59 a écrit :
Le code marche mais seul bémol lorsque la page est censée prendre 100% elle reste à la même largeur qu'auparavant.

Heu... ben la page n'est pas censée prendre 100% de la largeur, vu que dans le code que je propose (et en cela je reprend ton code CSS de départ), on a:

#contenu2 {
	width: 990px;
}

Donc on a une largeur fixe de 990px. Si on veut une largeur fluide, on peut travailler avec des pourcentages (width: 80% par exemple), ou bien ne pas donner de largeur du tout (ce qui revient à écrire width: auto, si on veut écrire une ligne de CSS inutile).

En fait j'aimerai que Si il n'y a pas de #contenu-droit alors #contenu-milieu devient 100% de #contenu2 (990px)

Or là, si pas de #contenu-droit, le #contenu-milieu ne prend pas 990px mais 990-252px.

J'ai du mal à m'expliquer

Encre merci d'avance

Emilien59 a écrit :
En fait j'aimerai que Si il n'y a pas de #contenu-droit alors #contenu-milieu devient 100% de #contenu2 (990px)

C'est bien ce que j'avais compris, et le code que je propose correspond à ça.
Soit tu ne l'as pas compris et as oublié de le tester, soit tu l'as recopié de travers.

Le problème persiste, j'ai pourtant appliqué à la lettre tes recommandations

La colonne de droite se met à droit mais sous le contenu milieu

Ok sur FF mais non sur IE 7/ie 6
Modifié par Emilien59 (13 May 2008 - 23:26)

Tu me parlais de caractère, késako en fait ?

Emilien59 a écrit :
Le problème persiste, j'ai pourtant appliqué à la lettre tes recommandations

Hmm... l'un de nous deux s'est planté, manifestement. On peut voir tes essais en ligne?

Emilien59 a écrit :
La colonne de droite se met à droit mais sous le contenu milieu

Ça, c'est le genre de problème qu'on a quand on place la colonne de droite en deuxième dans le code HTML, au lieu de bien la placer en premier comme indiqué.

Emilien59 a écrit :
Ok sur FF mais non sur IE 7/ie 6

Même chose: je demande à voir. Page en ligne?

Emilien59 a écrit :
Tu me parlais de caractère, késako en fait ?

Je n'ai pas parlé de caractère ou de caractères dans ce sujet, à ma connaissance.