[RESOLU] Pb d'alignement d'image dans div

Bonjour à tous,

Je profite de ce 1er message pour "m'introduire"...

Alors, j'ai un footer qui est constitué de 2 div. Le 1er ne contient que du texte et le 2nd est une image.

J'aimerai que mon texte soit aligné à gauche de mon footer et mon image à droite.

HTML :

<div id="footer">
	<div id="copyright">&copy; 2007</div>
	<div id="logo"><a href="#"><img src="./images/pix_k.gif" width="20" height="20" border="0" /></a></div>
</div>

CSS :

#copyright {
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
}

#logo {
	width: 50%;
	float: left;
	text-align: right;
	margin: 0;
	padding: 0;
}

Tout marche très bien si mon div "logo" contient du texte : il est aligné à droite du footer. Par contre, le problème apparaît quand mon div "logo" contient une image dans un lien.

J'ai cherché mais n'ai trouvé aucune solution, et bizarrement, pour une fois, ça marche sous IE mais pas sous Firefox.

Quelqu'un sait d'où ça peut venir?
Merci
Modifié par coulb (05 Dec 2006 - 14:22)

si ton image est dans un lien essaye peut être

#logo a img { ... }

au lieu de

#logo { ... }

et pourquoi un float:left à ton logo si tu veux qu'il soit alilgné à droite ? pk pas un float:right ?

Malheureusement zmove ce que tu m'as indiqué ne fonctionne pas.

Que j'utilise un float: left ou right revient exactement à la même chose comme mes 2 div font 50% chacun de largeur...

J'ai trouvé la solution suivante, mais c'est un peu du bidouillage, pour que ça marche à la fois sous IE et FF...

#copyright {
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
}

#logo {
	width: 50%;
	float: left;
	direction: rtl;
	text-align: right;
	margin: 0;
	padding: 0;
}

>> j'ai rajouté un direction: rtl

Par contre, si quelqu'un saurait m'expliquer pourquoi on rencontre ce petit "bug", j'aimerai bien comprendre, merci...

Je me retrouve face au même pb, une fois de plus...

Est-on vraiment obligé d'utiliser ce hack ou il y a tout simplement une "vraie" solution ou explication à ce problème?

Merci, toute information est la bienvenue...

et si tu fait comme ça?:

<style>
.logo {float:right;}
<style>

<div id="footer">
<a href="#" class="logo"><img src="./images/pix_k.gif" width="20" height="20" border="0" /></a>
&copy; 2007
</div>

Ou alors en gardant tes divs mais en mettant en margin:largeurdeladivenfloat a celle qui n'est pas en float.