18067 sujets

Questions générales et questions de débutants

[Résolu] Problème de positionnement avec float:left

Bonjour,
Alors voila je voudrai tout simplement mettre 2 div une à coté de l'autre dans une div parente.
Voici le code :

body{
	margin-top:0;
}
#content{
	position:relative;
	height:156px;
	width:748px;
	left:50%;
	margin-left: -374px;
	border: 1px solid #000000;	
}
#menu {
	position:relative;
	border: 1px solid #3E3E3E;
	margin-left:210px;
	margin-top:80px;
	width:330px;
	height:60px;
	float:left;
}
#news{
	position:relative;
	float:left;
	margin-top:70px;
	width:200px;
	height:60px;
	border: 1px solid #00FF00;
}

pour le html :

<div id="content">
	<div id="menu"></div>
	<div id="news"></div>
	<div style="clear:both;"></div>
</div>

Sur firefox pas de problème, par contre sur IE, la première div menu se colle tout à droite de content et la div news se retrouve à la ligne...
D'où peut venir ce problème ?
Merci
Modifié par wasmaster (11 Jun 2006 - 16:24)
Bonjour,
le positionnement flottant ne fonctionne pas avec un autre type de positionnement, tu dois donc l'enlever:

#content{
	position:relative
	height:156px;
	width:748px;
	left:50%;
	margin-left: -374px;
	border: 1px solid #000000;	
}
#menu {
	border: 1px solid #3E3E3E;
	margin-left:210px;
	margin-top:80px;
	width:330px;
	height:60px;
	float:left;
}
#news{
	float:left;
	margin-top:70px;
	width:200px;
	height:60px;
	border: 1px solid #00FF00;
}
Bonjour et merci pour votre réponse.
J'ai essayé votre solution, mais cela ne change rien, le problème est toujours là...
Avez-vous d'autres idées ?
merci
Merci, en mettant : margin-left:0px;
Que ce soir sur IE ou FF ça fonctionne, tous les deux sont bien placés au bord à gauche.
Pourtant mettant : margin-left:100px, sur Firefox j'ai bien 100 pixels d'écart, mais sur IE il doit y en avoir 200 ...
D'où vient ce problème ?
Merci
Salut

Ce ne serait pas 
margin-top:70px;
dans ".news" tu devrais peut être mettre 80px... comme l'autre Smiley ohwell
Hello, merci du conseil mais le problème est toujours là, sur firefox la div verte se positionne bien à droite de la noire, mais sous IE elle se met en dessous.
Merci
wasmaster a écrit :
Pourtant mettant : margin-left:100px, sur Firefox j'ai bien 100 pixels d'écart, mais sur IE il doit y en avoir 200 ...
D'où vient ce problème ?

Google > "IE doubled margin bug"
Edit : en anglais : http://www.positioniseverything.net/explorer/doubled-margin.html

Pour le flottant qui passe à la ligne, déjà je commencerais par corriger un peu le code de la page :
<html>
<header>
<style>
	… bla bla…
</style>
</header>

– Tu n'as pas de déclaration de type de document, ce que s'appelle s'exposer aux pires problèmes de compatiblité entre navigateurs ;
– l'élément header n'existe pas en HTML ;
– l'élément style requiert une information de type MIME pour son contenu. Dans ton cas, il te faudra écrire <style type="text/css"> pour ta balise ouvrante.

Commence déjà par ça. Smiley cligne
Modifié par mpop (11 Jun 2006 - 14:52)
La solution, c'est que le bug de la marge double fait qu'il ne reste plus assez de place pour placer le bloc aux contours verts, et donc que ce bloc passe à la ligne, tout en gardant sa mise en forme (marge haute de tant de pixels, flottant à gauche, etc).
Hermann a écrit :
le positionnement flottant ne fonctionne pas avec un autre type de positionnement, tu dois donc l'enlever.

Dis-moi Hermann, tu es sûr de ton coup ? Moi je n'ai jamais rien vu de tel, et il me semble bien que l'on peut donner à un bloc un comportement flottant et un positionnement relatif. Non ?

Par contre, cumuler comportement flottant et positionnement absolu ne servirait à rien. Ça ne serait pas impossible, mais je pense que le positionnement absolu annulerait tout simplement le comportement flottant.
a écrit :
Dis-moi Hermann, tu es sûr de ton coup ? Moi je n'ai jamais rien vu de tel, et il me semble bien que l'on peut donner à un bloc un comportement flottant et un positionnement relatif. Non ?


Non je peux pas en être totalement certain. En tous cas je n'ai pas lu de contre-indication à ce sujet mais disons que d'une part je ne l'ai jamais vu et d'autre part je ne vois pas dans quelle type de situation cela pourrait être vraiment utile.
Hermann a écrit :
Non je peux pas en être totalement certain. En tous cas je n'ai pas lu de contre-indication à ce sujet mais disons que d'une part je ne l'ai jamais vu et d'autre part je ne vois pas dans quelle type de situation cela pourrait être vraiment utile.

Ça peut être utilise si on veut positionner grâce à un comportement flottant, puis se contenter d'appliquer un correctif grâce au positionnement relatif.
Ou encore : un bloc flottant que l'on veut utiliser comme référent pour ses descendants positionnés en absolu, ce qui nécessite (il me semble) d'utiliser position: relative.
Bonsoir,
J'ai déjà utilisé float et la position relative sur un même élément, sans problème.
En plus des deux cas donnés ci-dessus, ça peut être nécessaire si l'utilisation de z-index est requis.
Dans un genre plus expérimental, j'avais fait des essais de centrage d'un boite flottante grâce au positionnement relatif.

D'ailleurs, dans la spécification CSS2, c'est précisé dans la définition même du positionnement relatif :
a écrit :
Une fois l'emplacement d'une boîte déterminé, conformément au flux normal ou flottant, cette boîte peut être déplacée relativement à cette position. C'est ce qu'on appelle le positionnement relatif.

Modifié par Alan (11 Jun 2006 - 20:34)
D'accord merci pour cette précision Alan. J'avoue avoir préjugé un peu vite sur ce cas de figure plutôt rare pensant comme le précise mpop
que la propriété float était un positionnement et non un comportement.
Sujet clos
Aller à