[Résolu]Margin latéraux sur un div qui doublent avec un overflow...

Bonjour les gens du forum,

Je monte une interface en trois colonnes, avec trois div, positionnés en float: left pour le premier, en float:right pour le dernier et le central avec des marges externes pour qu'il occupe la place laissée par les deux autres.

Du genre :

<div id="gauche">le gauche ici</div>
<div id="droite">le droit là</div>
<div id="central">le central ici </div>

#gauche {
float:left;
width:130px;
}

#droit {
float:right;
width:130px;}
}

#central {
margin-left:130px;
margin-right:130px;
}

Mon souci, c'est qu'en déclarant un overflow:auto sur le #central, les margin-left et margin-right semblent doubler sous FF et Netscape et mon #central se retrouve tout écrasé (et pas sous IE).

Et ce quel que soit le contenu de #central, sans overflow:auto c'est bon avec les trois navigateurs, avec l'overflow ça écrase...

Une 'tite explication connue pour ce phénomène ?

Merci
Modifié par Philos (03 Aug 2006 - 23:58)

Merci Laurent, vais aller voir le lien que tu indiques dans l'autre sujet pour comprendre tout ça

Quand j'aurai compris je reviendrai fermer mon sujet comme étant résolu.

Alors... j'ai essayé de comprendre.

Avec le contexte de formatage, mon div #central + ses margin viennent s'appuyer sur les deux div flottants au lieu de s'appuyer sur le conteneur global...

D'où les doubles marges...

Ok ok

Mais vu que j'ai besoin de ces deux margin et de l'overflow:auto, comment contourner tout ça sans positionner #central autrement ?

< Philos qu'est pas sûr de bien avoir tout compris >
Modifié par Philos (03 Aug 2006 - 23:56)

Si tu as un overflow en auto ou en hidden, justement, tu n'as pas besoin de la marge pour compenser le fait que le bloc se glisse sous le flottant… vu que justement le bloc ne se glissera pas sous le flottant !

Le problème reste d'émuler le même comportement avec Internet Explorer Win. L'article de Laurent suggère l'utilisation du HasLayout pour conférer au bloc en question un comportement proche de celui que devrait permettre d'obtenir la propriété overflow.

Donc : vire la marge, et débrouille toi avec overflow et le concept de HasLayout (hop, on relit l'article pour tenter d'y comprendre quelque chose ).

Bon avec un height:1% et en virant les margin ça roule. Et pour pas que ça colle à mes div latéraux... j'ai posé un margin-left sur l'un et un margin-right sur l'autre.

Hélas, ben... ça marche

Merci à vous deux de votre temps et de vos explications !

Et bien je suis bien content d'être tombé enfin sur ce post, qui résoud plusieurs problemes que je me posais depuis longtemps.

En effet, pareil, pour un probleme de comportement d'images en float, j'avais dût me servir d'overflow dans le conteneur, mais j'avais des problemes de marges au comportement hasardeux et instable.

Tout d'abord, mais ça je m'en suis rendu compte qu'en dernier, ne mettez pas votre overflow : hidden, dans <ul> si votre probleme se passe dans vos <li>
Mettez overflow, dans les <li> sinon, Mozilla Firefox pose des problemes.

Egalement ne pas mettre dans vos <li> la propiété display:block, sinon Opéra pète un plomb.

En tout cas, si vous mettez quand même overflow à <ul>, pour minimiser un certain comportement, ne mettre aucun padding ou margin à vos <li>, va falloir se débrouiller autrement.

Enfin effectivement si on fait le changement, en cours de route, remettre à zéro toutes les marges, pour les refabriquer (sans doute obligatoirement autrement) avec le nouveau comportement que donne overflow à vos <li>, sinon vous allez vous embêter inutilement comme je l'ai fait à essayer de doser difficilement sur un truc non conforme dès le début.... (Par exemple peu probable que vous deviez utiliser des padding, sur vos <ul>, <li> et tout élément type bloc. Les margin marchent mieux avec overflow pour créer des espaces à l'intérieur de <ul>, je crois, suite à la lecture de ce post)

Voilou pour moi. Content de sortir de ce bug. Ce post devrait être inscrit dans la FAQ. J'ai eut du mal à le trouver, le titre n'étant pas très clair.
Modifié par Damonya (19 Aug 2006 - 17:03)