Width variable / une colonne fixe part en bas :(

Bonjour,


Je suis actuellement en train de programmer un site dont je ne connais pas la largeur (width général du site à 90% du navigateur).

Sur l'une des pages, j'ai deux colonnes dont celle de droite fait 250 px + une bordure de 1 px.

Dans la colonne de gauche, je dois mettre un table width = 100%.

Dès que j'ajoute la mention "width=100%", ma colonne de droite part en bas.

Pourtant si je donne une couleur à mon div de gauche, je vois bien qu'il s'arrete quelques pixels avant la colonne de droite, d'où mon incompréhension...

Si quelqu'un pouvait m'aider, j'en serais grandement reconnaissant

Mon code :

<div id="Conteneur_Default">
	<div id="ColLeft_Default">
		<div id="FRContent">
			<table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="ColRight_Default">
		<div id="MiniAgenda"></div>
	</div>
</div>

Et pour les CSS :

#Conteneur_Default {
	min-height:575px;
}

#ColLeft_Default {
	float: left;
	min-height:575px;
	margin-right: 252px;
}

#FRContent {
	background-color: red;
}

#FluxRssContent table {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}

#ColRight_Default {
	float: right;
	width: 250px;
	min-height:575px;
	background-color: #FF8000;
	border-left: 1px solid #000000;
}

merci d'avance,

FreD.

bonjour

ne met qu'une des colonnes en float, par ex. enlève le float:left de #ColLeft_Default

la table occupera alors naturellement 100% de l'espace disponible, càd 90% moins 250px. (enfin, je pense..)

Salut,

Mwoui, laisse ta colonne de gauche dans le flux (supprime le float: left;)
Mais n'oublie pas de placer dans le code ta colonne de droite avant celle de gauche (elle reste en float: right elle)

Bonsoir,

fred036 a écrit :
Dès que j'ajoute la mention "width=100%", ma colonne de droite part en bas.

Tous navigateurs ou Internet Explorer (6, 7?) uniquement?

Il me semble avoir déjà eu ce problème avec IE, mais c'était un bug spécifique à ce navigateur. Mais avant tout:

J'ai testé ton code, mais ça ne donne rien de correct car le type de positionnement et de dimensionnement utilisé pour les colonnes est mauvais. Si tu veux un design fluide avec une colonne de droite de 250px et une colonne de gauche prenant tout l'espace restant, il faut placer la colonne de droite en premier dans le code, la faire flotter à droite, et se contenter d'une marge à droite pour la colonne de gauche (non flottante). Cf. sur Alsacréations le tutoriel sur une mise en page en trois colonnes (il suffit d'utiliser le même principe et de virer la colonne de gauche).
Modifié par Florent V. (20 Mar 2008 - 00:02)

ghost a écrit :
Salut,

Mwoui, laisse ta colonne de gauche dans le flux (supprime le float: left;)
Mais n'oublie pas de placer dans le code ta colonne de droite avant celle de gauche (elle reste en float: right elle)

Alors ca.. c'est parfait exactement ce que je voulais


Merci beaucoup !!!

Bonjour,

Un problème dans ce genre là, Florent?

Si le décalage se produit uniquement sur IE6, c'est le three pixel gap. Sur IE7, problème de margin / padding en général, sinon, c'est qu'il n'y a pas la place de mettre les deux éléments côte-à-côte (soit retirer le float de l'un deux, soit mieux gérer leur width, ce qui est parfois délicat en % ou em).

Cordialement, SD.

SiDi a écrit :
Un problème dans ce genre là, Florent?

Oui, je crois que j'en étais arrivé à cette conclusion. Mais il me semble avoir déjà vu ce problème avec une table en width:100% dans un contexte où il ne devrait pas y avoir de Three Pixel Jog.