Un problème avec clear: both;

Salut à tous,

Je suis sur une mise en page de ce type :

http://css.alsacreations.com/modeles/modele16.htm

Le souci, c'est que si j'utilise des flottant à l'intérieur de la colonne centrale et que je mets un clear: both; ensuite pour retourner dans le flux normal, tout ce qui est en dessous est "poussé" en dessous des colonnes de gauche et droite.

en gros :

<div id="conteneur">
    <div id="haut_de_page">haut de page</div>
   
    <div id="gauche">colonne de gauche</div>

   <div id="droite">colonne de droite</div>

   <div id="milieu">
      <div id="contenu_milieu">
        <div id="milieu_gauche">image</div>
        <div id="milieu_droite">texte</div>
        <div class="spacer">&nbsp;</div>
      </div>
      <div id="suite_contenu_milieu">
      le reste du texte
      </div>
</div>

    <div id="bas_de_page">bas de page</div>

</div>

C'est donc le suite_contenu_milieu qui se retrouve sous les colonnes.

Je ne sais pas si je suis très clair mais avez vous une idée ?

Merci d'avance
YvesTan
Modifié par YvesTan (10 Jun 2005 - 09:55)

Il te manque une balise </div> fermante...
Allez hop, ferme ta balise !

/Edit/
Ah bah non, avec la mise en forme du code, c'est pas ça... désolée, je prends la porte...
Bon ça nous aiderait si on voyait ta p'tite css avec le clear et tout
Modifié par cktoon (10 Jun 2005 - 09:59)

contrairment a cktoon, je pense que tu as une </div> fermante de trop.
Du coup ton footer se retrouve hors de ton conteneur.

Je ne sais pas si c la solution mais ça peut aider

A voir sinon montre nous ton CSS

Merci pour vos réponses. Je ne vois pas la div fermante en trop. Voici l'explication en image et en code

http://www.spatial-modelling.info/test.php

On voit bien le texte en bas.

++

et non il manque de balie </div> ni une en trop

<div id="conteneur">
	<div id="haut_de_page">haut de page</div>
	<div id="gauche">colonne de gauche</div>
	<div id="droite">colonne de droite</div>
	<div id="milieu">
		<div id="contenu_milieu">
			<div id="milieu_gauche">image</div>
			<div id="milieu_droite">texte</div>
			<div class="spacer">&nbsp;</div>
		</div>
		<div id="suite_contenu_milieu">le reste du texte</div>
	</div>
	<div id="bas_de_page">bas de page</div>
</div>

par contre sur le lien que tu donnes, je vois pas ou est le problème :S

sur FF c'est OK et sur IE aussi bien que j'ai l'impression que la nouvelle msn bar (avec des onglet malheureusement mal pensé) fait planter un peu le truc

Le problème dans l'exemple donné, c'est le texte du milieu qui se retrouve tout en bas. alors qu'il devrait être en haut

C'est le bloc où il est écrit : "le reste du texte qui devrait etre collÃe en haut"

En fait, le clear: both; agit sur tout le div "milieu" alors que je voudrais juste qu'il agisse sur le div "contenu_milieu"

Quand aux balises en trop ou en moins, je ne vois vraiment pas !

++

Bonjour ;
le "clear: both;" renvoie en dessous, puisqu'on lui demande, justement (voir son nom) de tout "dégager". si tu veux ajuster son positionnement, tu as deux solutions : lui attribuer une largeur plus grande que celle de l'espace où il risque de se glisser ou lui indiquer un "padding-top".
Tu aurais utilisé la recherche, tu aurais pu trouver ceci :
http://forum.alsacreations.com/topic.php?fid=4&tid=4147&s=clear%3A+both
J'oubliais : pour t'y retrouver dans tes balises, "indente-les" (décalle les par rapport à la marge selon leurs relations) exemple :

<div>contenu
(-----)<div>contenu
(-----------)<div>contenu</div>
(-----------)<div>contenu</div>
(-----------)<div>contenu</div>
(-----)</div>
</div>

Modifié par Macpom (10 Jun 2005 - 12:37)

Pour empécher ce comportement, tu dois faire flotter ton div "milieu", ça limitera l'action des propriétés clear sur des descendants du div "milieu" à ce div.

Merci Bobe, je comprends mieux le problème. Avec un "milieu" flottant ca fonctionne cependant, comment puis-je faire pour que la largeur du "milieu" s'adapte dans ce cas ?

Macpom > Excuses moi mais ce que tu proposes est une manière de détourner le problème en considérant que tu connais à l'avance la hauteur des div milieu_droite et/ou milieu_gauche

Quand à l'indentation, je sais très bien le faire dans mon éditeur vim mais
sur le forum j'ai eu plus de mal (je prends note de ton truc avec les tirets).

++

Ca fait beaucoup de div tout ça... qui disait qu'un excès de div tuait les div ? Bon, essayons de faire avancer un peu les choses quand même... je remarque que tu crées une nouvelle div pour y placer une image simplement en float avec une bordure... peut-être une div en trop là,

une classe .imagefloatleft { float: left; border: 1px solid #000; background-color: #666;}

que tu appliques sur une image pourrait suffire, et hop là une div en moins...
Pour le coup de ta classe spacer aussi, je dirais que plutôt qu'une balise <div>, tu gagnerais en clareté à utiliser une balise <hr />...
Après, faut voir et tester des choses

/Edit/ petites corrections orthographiques et de mise en forme...
Modifié par cktoon (10 Jun 2005 - 23:20)

YvesTan a écrit :

Donc comme je le disais, la solution de Bobe focntionne mais je ne parviens pas à faire en sorte que la colonne du milieu prenne toute la largeur.

Il te faut donner une largeur explicite au div "milieu".

Oui, ce qui m'embête, c'est que la mise en page qui prend toute la lergeur de la page ne peux plus marcher dans ce cas là !?

++

Pour les (-----) je les justement mis entre parenthèses : utilises plutôt une tabulation (touche où 2 flèches se croisent, sur la gauche de ton clavier), pour faire tes indentations de code.
Pour avoir une largeur fixée, mais qui change selon la largeur de ta fenêtre de navigateur : utilise des %.

Je ne viens pas sur ce forum sans avoir fais quelques essais avant ! Donc le pourcentage je veux bien mais je suis curieux de savoir comment tu ferais

J'ai essayé un postion absolue avec un left et un right. Ca marche sous FF mais pas sous IE...

Bon pour sortir du sujet, je sais ce qu'est la touche tab. Même si pour l'indentation sous ViM je préfére utiliser la touche ">", question de choix

++