alignements dans un div

[bobolito]

Bonjour

Plusieurs question :

j'aurais voulu savoir s'il était possible d'aligner des élements à gauche et d'autres à droite dans un même div (dont on ne connait pas la largeur et le nombre d'éléments à gauche et à droite étant variable) ?

est ce qu'il faudrait plutôt utiliser pour ça 2 div côte à côte ? (avec float:left sur le premier par exemple et aligné à gauche dans l'un et aligné à droite dans l'autre).

Dans ce dernier cas pourquoi IE affiche un petit espace entre les 2 div ?

merci

[slender]

bonjour

oui le float left et right conviennent pour la disposition que tu désires à la condition que les largeurs soient adéquates.

D'un autre côté, pourquoi vouloir toujours tout emballer dans des div quant on veut placer des élements en float left ou right?

en admettant que tu veuilles placer un menu et une image dans ton bloc:

tu peux ecrire par exemple:

<div id="monContainer">
   <ul style="float:left;">
        <li><lien 1</li>
        <li><lien 2</li>
        <li><lien 3</li>
        <li><lien 4</li> 
    </ul>
    <img style="float:right;" src="mon_logo.gif" />
</div>

Les éléments que tu places sont déja des boîtes, ce n'est pas la peine de "multiplier les div dans les div". En fait tout dépend de tes boîtes, si ce sont des blocs ou des boîtes en ligne.

Ensuite, le décalage visible dans IE est certainement dû à un margin par défaut que tu corriges en mettant un margin: 0; au bloc à placer.

[bobolito]

Salut

en fait j'avais résolu le problème en mettant tout (une image et un champ input) dans un span avec float:right.

Justemment je voulais éviter d'utiliser trop de div mais apparemment ce n'était pas clair dans ma question.

Cependant pour la question suivante : d'où vient le fait que IE ajoute un petit espace entre 2 div à la suite quand le premier a un float:right ?

merci pour l'intervention en tout cas...

[slender]

repere la marge en cause en mettant une couleur à ton bloc en lui mettant temporairement un background-color: red; par exemple. Ensuite tu auras à corriger les marges de ce bloc certainement. Sinon mets ton code qu'on en ai un peu plus à lire.

[bobolito]

Salut

<div id="bloc1" style="width:150px;background-color:#AAA;float:left;">bloc 1</div>
<div id="bloc2" style="width:150px;background-color:#DDD;">bloc 2</div>

avec ce type de code par exemple.

Est ce que ça a un rapport avec cette histoire de marge intereprétées différemment par IE et les autres, même si celles-ci ne sont pas précisées ?

[Sebastien]

C'est marrant j'ai le même probleme d'espaces entre blocs dont certains sont en float : http://s.billard.free.fr/test/

Je n'arrive pas a le resoudre...

[Sebastien]

J'ai trouvé : c'est un bug IE ! Quand un element avec un width ou height specifié suite un bloc en float, IE applique une marge de 3 pixels

[bobolito]

trop fort IE...

où as tu trouvé ça ?

[Sebastien]

Des references à ce bug sur plusieurs forums et sites US.

[slender]

des renseignements ici,

http://www.positioniseverything.net/explor...hreepxtest.html

j'ai essayé dans ton cas sébastien mais j'échoue. Deja tu mets des with en em pour ton menugauche, mais même en mettant des px je n'ai pas de résultats corrects à l'écran.