Largeur en pourcentage sur une DIV

Bonjour à tous !

Je suis débutant dans le XHTML et le CSS. J'ai compris globalement comment faire un site en "fixed" (corps de taille prédéfinie) mais j'essaie depuis peu d'apprendre à faire des sites en "fluid" (corps de taille dynamique).

La page concernée contient deux blocs. Un contenant le menu et un autre qui contient le contenu de la page :

http://uppix.net/1/a/0/577daf769e33c785b34f583fd831ctt.jpg

Mon problème est le suivant : Lorsque je souhaites indiquer à ma DIV "contenu" qu'elle doit prendre 100% du reste de l'écran (avec width: 100%;), cette même DIV descends en dessous du menu. A noter que les deux div ont la propriété float: left;.

http://uppix.net/d/f/9/1e5f71789b14d2159f4ebd82fcb37tt.jpg

Comment dire à ma propriété de prendre 100% de l'espace restant ?

Merci beaucoup pour votre aide.
Modifié par SuperSpeedy (19 Sep 2009 - 17:13)

Bonjour,

100%, ce sera 100% de la page et non de l'espace restant. Pour une div, tu peut utiliser width:auto; pour faire faire prendre tout l'espace disponible, vu que c'est le comportement de base d'une div.

Laurie-Anne a écrit :
Bonjour,

100%, ce sera 100% de la page et non de l'espace restant. Pour une div, tu peut utiliser width:auto; pour faire faire prendre tout l'espace disponible, vu que c'est le comportement de base d'une div.

Bonjour Laurie-Anne, merci pour ta réponse.
J'ai essayé mais voilà le résultat :

http://uppix.net/8/b/2/90d5167e5b9ccf36ddccc4b837be3t.jpg

On peux constater que la div se fie au contenu. J'ai appliqué dans cette capture d'écran la propriété width:auto; au lieu de 100% (appliqué sur la div qui englobe la "boite contenu").
Modifié par SuperSpeedy (19 Sep 2009 - 19:42)

Si t'as 2 éléments, genre un menu et un contenu, le menu de largeur fixe. Pour que le contenu prenne tout l'espace restant, le mieux encore c'est d'utiliser les marges négatives.

Genre si ton code ressemble à :

<div id="contenu">
  Du contenu ici
</div>
<div id="menu">
  Le menu là
</div>

T'as juste à rajouter un div par dessus le contenu :

<div id="contenu-wrap">
  <div id="contenu">
    Du contenu ici
  </div>
</div>
<div id="menu">
  Le menu là
</div>

Et pour le CSS, On va fixer le menu à 200 pixels :

#menu {
	float: left;
	width: 200px;
}

Le contenu-wrap va avoir une largeur de 100%, avec une marge négative correspondante à la largeur du menu :

#contenu-wrap {
  float: right;
  margin-left: -200px;
  width: 100%;
}

Et enfin le contenu va avoir une marge positive correspondante aussi à la largeur du menu :

#contenu {
	margin-left: 200px;
}

En très gros, la marge négative va indiquer ici "j'veux que mon div fasse 100% de largeur, mais laisser 200 pixels de place pour les floats."
Modifié par FlorentG (19 Sep 2009 - 20:15)

Bonjour florentG

Pour mieux t'expliquer, voici globalement ma structure html :

<div id="menu">le menu ici</div>
<div id="boxglobal">
   <div id="box">Le contenu ici</div>
</div>

J'ai donc appliqué ton idée mais je penses que je l'ai mal appliqué à mon code. En voici un aperçu :

http://uppix.net/9/7/d/f8ff941e3ce64fe3bebf287fe0dcett.jpg

Peut être serait-il mieux que je publie ici mon code html/css ? J'ai peut être mal structuré mon site ? Il faut savoir que ceci n'est qu'une partie du site. En effet, il y a au dessus deux div qui englobent le site à savoir :

- Une div qui contient le haut de ma page (non visible sur les captures d'écran),
- Une autre div qui contient elle le menu ainsi que cette "box" qui doit contenir du texte.

MAJ : A noter que la deuxième div contenant le texte part en scroll sur le côté.

Merci pour l'aide que vous pourriez m'apporter
Modifié par SuperSpeedy (20 Sep 2009 - 01:31)

Bonjour à tous, désolé pour le double post.
Je n'ai pas eu la politesse de venir vous expliquer comment j'ai résolu mon problème (ça peut aider qui sait ^^).

En fait il s'agissait juste des margins : elles étaient fixe. Du coup ça posait problème lors du redimensionnement de la div, qui ne pouvait pas se contenir et qui retournait à la ligne.

Donc pour corriger, il faut mettre des pourcentages sur les margins et non une valeur fixe.
Voilà !