[Résolu]Problème de divs.

Bonsoir à toutes et à tous,

Je rencontre un petit soucis avec un div qui ne veut pas se positionner correctement à côtés d'un autre enfin du moins il s'y position mais le div qui contient les deux div ne suit pas.

Je m'explique :
J'ai un div principal qui contient deux autres divs. Les deux autres divs correspondent à deux colonnes, une à gauche de 70%, et une autre à droite de 30%.
J'arrive à positionner ces deux divs côtes à côtes mais mon div principal ne s'aggrandit pas en même temps que les deux autres. Les deux div de gauche et de droite passe donc par dessus le design (bottom page etc ...) qui ne s'aggrandis pas en conséquence.

http://www.rpg-z.com/ex.jpg
Un petit screen

LE CODE :
HTML :

<div class="principal">
<div class="gauche">
Contenue situé à gauche de ma page.
</div>

<div class="droite">
Contenue situé à droite de ma page.
</div>
</div>

CSS :

div.principal{ /*Contenue des pages*/
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0px;
	width: 880px;
}

/*POUR LES PAGES SEPAREES EN DEUX */
div.gauche {
	width: 70%;
	margin: 0px;
	padding: 0px;
	float: left;	
}

div.droite {
	width: 30%;
	margin: 0px;
	padding: 0px;
	float: left;	
}
/*FIN*/

Merci pour votre aide
Modifié par killermano (25 Jun 2009 - 22:32)

Hello killermano et bienvenue parmi nous ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation

Houla, désolé, je n'ai pas vue la balise code, je rectifie ça dessuite. Merci.

Quand à ton problème, la solution se trouve là : Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?

Oui, effectivement en appliquant un clear: both; sur mon div bottom page, celui-ci passe bien en dessous de mes deux div droite et gauche. En revanche dans cette configuration, mon div contenant le fond blanc de ma page principale ne s'aggrandis pas automatiquement. J'ai donc un gros trous en assez vilain en plsin milieux de ma page.

J'ai donc utilisé les propriétés position: absolute et relative pour tenter de résoudre le problème. Le centre de ma page s'aggrandis bien mais le bottom page (avec la propriété clear: both) repasse en dessous. Alors je suis un peu largué.

- Si je met juste le clear: both sur mon bottom_page, celui-ci se positionne bien mais le div central ne suis pas (niveau hauteur).

- Si je fais en sorte que le div central suive la grandeur de la page (gérée par les divs droite et gauche) grâce à position absolute et relative, c'est le bottom_page qui repasse en dessous et qui remonte tout en haut (malgrés le clear: both)

Je suis largué là, merci pour votre aide.
Modifié par killermano (25 Jun 2009 - 20:58)

As-tu essayé, à la place du clear:both, d'affecter un overflow:hidden à div.principale ?


Edit: au passage il me semble que tes conteneurs sont uniques et il serait plus logique d'utiliser un attribut id plutôt que class : lire Quelle est la différence entre une classe et un id.
Modifié par Heyoan (25 Jun 2009 - 21:17)

Je viens de tester et ça fonctionne trés bien, merci beaucoup. Je vais de ce pas lire l'article que tu me proposes. Merci.

De rien !

Sinon en complément de l'article dont Laurie-Anne t'a donné le lien plus haut je t'invite à lire Float, clear et contextes de formatage.

Et si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.