div imbriqués...

[martin]

Bonjour,

Voici une partie de mon ficheir css :

div.centre
	{
	background-color:#FFFFFF;
	min-width:500px;
	height:200px;
	border-width:0px 1px 0px 1px;
	border-style:solid;
	border-color:#333333;
	padding:0px 0px 10px 0px;
	}

div.gauche
	{
	float:left;
	width:70%;
	text-align:justify;
	border-width:0px 1px 1px 1px;
	border-style:solid;
	border-color:#333333;
	background-color:#F8F8F8;
	margin:1%;
	}

div.droite
	{
	float:right;
	width:20%;
	text-align:justify;
	border-width:0px 1px 1px 1px;
	border-style:solid;
	border-color:#333333;
	background-color:#F8F8F8;
	margin:1%;
	}

j'ai dans mon code html le div centre qui contient les div gauche et droite...

Mon problème : le div centre s'ageandit pas en fonction de la taille des div imbriqués, mais reste à la taille min-height

Exemple

J'ai du oublier un truc primordial et evident, mais j'ai pas encore acquis toutes les bases des CSS ;-)

Merci d'avance

[Sebastien]

Je peux me tromper mais : en mettant les div en float tu les sors du flux. Il n'y a donc plus rien dans le flux qui "pousse" ton conteneur qui reste à la valeur min-height.

J'ai bon les experts?

[martin]

Ben en fait, c'est ce que j'était en train de lire sur un post assez semblable, mais des éclairage sur cette sortie de flux m'intéresseraient...

avec un clear:both; dans le footer, j'ai plus mes marges sur le div centre... et sans les float ca déconne total.. a moins que je fasse pas comme il faut

Modifié 25 Octobre 2004 par martin

[LaurentDenis]

Pourrais-tu donner l'url d'une page de test ?

Il est tout à fait logique que la hauteur de ton conteneur #centre soit indifférente au contenu flottant: float est fait pour ça, et le clear:both sur un 3e élément de contenu est la solution logique.

Mais cette histoire de marge n'est pas très claire

[MissMonde]

Bonjour Martin,

je suis d'accord avec Sébastien, les div flottants sont enlevés du flux, donc le conteneur (div centre) n'a plus de contenu auquel s'adapter.

d'après ta CSS, tu veux obtenir une structure avec une colonne contenu et une colonne menu à droite.

il faut que l'une des 2 colonnes soit du flux normal, donc sans positionnement.

l'autre colonne peut être soit flottante, soit en position absolue, et dans ce cas, il faut choisir la colonne dont la hauteur est la plus grande comme colonne en flux normal.

va voir ce tutoriel qui te montre comment faire un design basique avec un entête, un contenu avec un menu à gauche et un pied de page.

http://www.alsacreations.com/articles/design/

Ah oui, aussi : les min et max sur les height et width ne marchent pas avec IE.

Bon courage

Oups, pardon, je laisse Laurent poursuivre, il est autrement plus calé !!

Modifié 25 Octobre 2004 par MissMonde

[Greg]

Salut,

D'après ce que j'ai compris de ton problème, il est probable que l'article suivant y réponde:

http://openweb.eu.org/articles/initiation_float/

(paragraphe Débordement et spacer)

Le principe est de rajouter dans ton div centre (qui contient déjà le gauche et droite) un élément supplémentaire à la suite de ces deux div, par exemple un hr.

Sur ce hr tu applique les styles clear:both et visibility:hidden.

Ceci étirera ton div centre jusqu'au moins la hauteur max de tes div droite et gauche.

L'article t'apportera plus de détails

En espérant que ton problème était bien là ...

Modifié 25 Octobre 2004 par Greg

[martin]

page d'exemple

bon, evidement, en remetant ma boite dans le flux, avec un hr, je résoud certains problèmes. mais mes boites ne sont plus positionnées comme prévu. j'essaie de voir ce que je peux simplifier...

[LaurentDenis]

Pourquoi ne pas simplement et logiquement :

- garder tes div gauche en float et droite en flux

- intégrer ton div menu_bas (en flux) dans le div centre en le dotant d'un clear:both

[martin]

ce que je ne comprends pas actuellement, c'est que j'ai l'impression que mon div gauche est dans mon footer... au lieu d'être dans le div centre...

comme j'ai un peu tout changé, je refait le point :

css :

div.bandeau_haut
	{
	background-color:#FFFFFF;
	min-width:500px;
	height:125px;
	border-width:1px 1px 0px 1px;
	border-style:solid;
	border-color:#333333;
	}

div.menu_haut
	{
	min-width:476px;
	border-width:0px 1px 0px 1px;
	border-style:solid;
	border-color:#000000;
	background-color:#000000;
	color:#EEEEEE;
	font-size:12px;
	padding:2px 16px;
	}

div.conteneur
	{
	min-width:500px;
	background-color:#FFFFFF;
	border-width:0px 1px 0px 1px;
	border-style:solid;
	border-color:#333333;
	}

div.centre
	{
	background-color:#FFFFFF;
	border-width:0px 1px 0px 1px;
	border-style:solid;
	border-color:#333333;
	padding:0px 0px 10px 0px;
	}

div.droite
	{
	float:right;
	width:20%;
	text-align:justify;
	border-width:0px 1px 1px 1px;
	border-style:solid;
	border-color:#333333;
	background-color:#F8F8F8;
	margin:1%;
	}

div.menu_bas
	{
	min-width:494px;
	text-align:center;
	border-width:0px 1px 0px 1px;
	border-style:solid;
	border-color:#000000;
	background-color:#000000;
	color:#EEEEEE;
	font-size:10px;
	padding:3px;
	}

xhtml :

<body>

<div class="bandeau_haut"></div>

<div class="menu_haut"></div>

<div class="conteneur">
	<div class="centre"></div>
	<div class="droite"></div>
</div>

<div class="menu_bas"></div>

</body>

[martin]

bon maintenant c'est mieux, merci à tous... mais j'ai un autre problème assez bizarre... voir autre sujet ;-)