Float : pb d'enchaînement

[MarvinLeRouge]

Salut,

J'ai une page xhtml 1.0 strict avec la structure suivante :

<div id="col1"></div>
<div id="wrapper1">
<div id="menuHor"></div>
<div id="wrapper2">
<div id="col2"></div>
<div id="contenu2">
<h2></h2>
<p></p>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<form>
<p>texte <select></select></p>
<a class="precedent"></a>
<a class="suivant"></a>
<p>pagination</p>
</form>
</div>
</div>
</div>

et les css

#col1
{
width : 150px;
float : left;
}
#wrapper1
{
margin-left : 150px;
}
#col2
{
float : right;
width : 100px;
}
#contenu2
{
margin-right : 100px;
}
.item
{
float : left;
width : 50%;
}

ce qui correspond à :

- un menu vertical côté gauche en flottant

- un menu horizontal prenant toute la largeur à droite

- en dessous du menu horizontal, séparation verticale supplémentaire :

- une colonne côté droit en flottant

- une colonne centrale avec le contenu

J'ai bien mis les différentes marges afin de tenir compte des zones flottantes. Mon problème est le suivant : j'ai une page dans laquelle la zone contenu2 (la colonne centrale) donne ceci :

Les item sont des div flottant occupant chacun 50% de la largeur de contenu2 (j'ai vérifié) donc normalement, pas moyen de passer à droite : ils sont censé (il me semble) tout pousser vers le bas.

Mais le premier paragraphe du formulaire se retrouve à flotter complètement à droite, en empiétant sur la marge droite de contenu2, et même sur col2 !

Le seul moyen que j'ai trouvé pour l'instant pour provoquer un retour forcé, c'est un br en clear:both, mais ça place forcément le formulaire plus bas que la colonne de gauche (puisqu'elle est en float left), même si le contenu2 est plus court que la colonne de gauche.

Quelqu'un aurait une idée de pourquoi ça me fait ça ? Parce que là je cale.

En gros, comment faire pour faire un clear qui n'ait d'effet que dans le parent direct, et pas plus loin ?

Merci

[Thanh]

J'aurais fait ça plutôt comme découpage:

<div id="main">
	<div id="gauche"></div>
	<div id="centre">
  <div id="menu-hory"></div>
  <div id="contenu">
 	 <h2>titre</h2>
 	 <p>texte sous titre</p>
 	 <form>
    <p>texte <select></select></p>
    <a class="precedent">LIEN PRECEDENT</a>
    <a class="suivant">LIEN SUIVANT</a>
    <p>pagination</p>
 	 </form>
  </div>
	</div>
	<div id="droite"></div>
</div>

Modifié 17 Mars 2005 par solo

[MarvinLeRouge]

Non, le menu horizontal recouvre contenu2 ET col2, et il est à droite de col1.

[Perrine]

Bonjour Marvin,

Est-il possible de voir une page en ligne pour mieux cerner le problème ?

[MarvinLeRouge]

Salut,

J'ai mis des copies d'écrans en ligne :

Ce que je voudrais obtenir

Ce que j'ai

Ma description initiale du problème étant assez complexe, je reviens dessus, avec images à l'appui cette fois :

Sur les schémas suivants,

- ce qui se trouve à gauche du trait rouge (col1) est en float left

- les traits verts délimitent le menu horizontal et le div en dessous, qui englobe contenu2 et col2

- ce qui se trouve à droite du trait bleu (col2) est en float right

- les marges sont bien positionnées pour qu'il n'y ait pas de zone libre : lorsqu'un élément est flottant, l'élément adjacent à une marge égale à l'ensemble de la place prise par le flottant

- la page est essentiellement constitué d'une série de blocs contenant un petit bloc marron et un texte. Le bloc englobant un élément marron + un paragraphe (entouré de orange pour le schéma) est en float left, et avec une largeur de 50%

Pb : Le premier élément du formulaire (entouré en orange) qui suit la série se retrouve étrangement à droite de la série en question, en débordant carrément de son conteneur. Ceci ne devrait logiquement pas avoir lieu, puisque chaque item de la série fait 50% de la largeur du conteneur.

Je suis obligé de mettre un clear left sur le formulaire en question, ce qui ne me convient pas du tout, puisque celui-ci sera du coup obligatoirement plus bas que ma colonne de gauche, même s'il n'y a que 2 items dans ma série.

Quelqu'un aurait une idée de pourquoi ça me fait ça ? Parce que là je cale.

Comment faire pour faire un clear qui n'ait d'effet que dans le parent direct, et pas plus loin ?

Merci

Modifié 18 Mars 2005 par MarvinLeRouge