Des Div's qui ne respectent pas la largeur...

Bonjour,

J'ai un souci avec un site dont le design est fait en css...

J'ai un #conteneurCentral qui est mis en :

clear:both;
position:relative;
width:100%;
display:block;

A l'intérieur, j'ai 2 éléments :

#MenuLeft (float:left;width:175px;)
#CentrePage (float:right);

Pour l'instant, j'ai mis CentrePage avec un bgcolor pour le reconnaitre facilement... car il pose problème dans le sens que soit il ne s'adapte pas à la taille de ma fenetre, soit il va "à la ligne" hors de mon conteneur...

Le problème est que le site a une largeur non-fixée (il doit s'adapter à la taille de la fenetre) et que je souhaiterais pouvoir utiliser des largeur genre 100% dans mon CentrePage.. mais si je fais ca, il part à la ligne et me fait 100% de ma page alors que je souhaiterais qu'il me fasse 100% de la page - 180px (menu left)...

Je ne suis peut-être pas bien clair, voici le site (en développement) ==>

http://www.anlh.be/newaccesat

Vous pouvez voir que :

1° sur la homepage, l'orange est aligné à droite (float right) mais ne prend pas toute la largeur qu'il pourrait (il devrait aller se coller à 10px du menu de gauche)...
==> mais au moins, il est à la bonne place...

2° si vous cliquez sur "Recherche Multiple" (vous devrez peut-être effectuer une recherche pour le voir), tout va partir en bas car mon tableau de résultat indique un 100% en largeur (mais je veux qu'il fasse 100% de CentrePage !!!!!!!)

3° si vous cliquez sur une rubrique non encore développée (ex.: FAQ), vous verrez que l'orange ne couvre que la partie texte alors que j'aurais souhaité qu'il prenne toute la partie à droite du menu de gauche...

Merci de m'aider (si vous m'avez compris)

FreD.
Modifié par fred036 (30 Aug 2007 - 12:39)

Bonjour,

merci d'éditer ton message pour y utiliser les balises [ code] ... [ /code] (sans les espaces) comme demandé dans les Règles du Forum, cela rendra ta demande plus lisible pour tous

Hello,

Pour faire ce que tu demande (float de droite de largeur variable), je te conseille en fait d'oublier les float. En effet, si tu ne leur fixe pas de largeur, ils vont s'étendre au maximum, s'ils ne tiennent pas sur une "colonne", ils vont passer à la "ligne" suivante, donc dans ton cas sous ton menu.
Si tu leur fixe une largeur par contre pas de problème, mais là il t'es impossible de la choisir, même en % car ton menu est défini en px...

Je te conseillerai de placer ton menu en position:absolute, et de mettre ton #centrePage avec un margin-left égal à la largeur du menu, et une largeur de 100%
Et d'enlever les float à ces deux éléments bien sur.

PS : Je ne suis pas allé voir ton exemple ni n'ai regardé ton code, mais ayant déjà eu le problème, je pense pas avoir trop répondu à coté de la plaque :}

non tu as bien répondu (j'avais testé l'inverse.. mettre le centrePage en absolute...)

Mais dans ce cas, le menu de gauche ne s'alonge pas en fonction de la partie de droite (et inversément)...

En fait, j'pense que je vais tout passer en px.. et bloquer la largeur de la page... ca résoudra tous mes soucis...

Si tu veux simuler le fait que ton menu de gauche s'allonge avec la hauteur de la page, joue plutot avec le background-image du conteneur général de tout ça.

Jette un oeil sur cet article pour plus de précisions