28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

J'ai un petit soucis de mise en forme. Je dois positionner un logo en absolu par rapport au div #header en haut à gauche. Puis un div #annonces suit à la droite du logo avec une marge à gauche pour l'espacer du logo.

Ca fontionne sous FF et Opera, par contre sous ie le div #logo prend la marge gauche du div #annonces...

Voici la mise en forme css :
#header {
	position: relative;
	width: 500px;
	background-color: #fff;
	border: 3px solid #000;
}

#logo {
	position: absolute;
	width: 150px;
	height: 50px;
	background-color: #f00;
}

#annonces {
	margin-left: 200px;
	width: 300px;
	height: 80px;
	background-color: #ff0;
}


La structure xhtml :
	<div id="header"> <!-- div bordure noir -->
	
		<div id="logo"></div> <!-- div rouge -->
		<div id="annonces"></div> <!-- div jaune -->
		
	</div>


Sous ff et opera ça donne ce que je veux :
http://www.hiboox.com/vignettes/1507/a34b715b.gif

Sous ie il y a ce problème :
http://www.hiboox.com/vignettes/1507/c3e8012c.gif

Quelle est l'astuce pour contourner ce bug dans ie ???

PS : les contraintes : je dois garder le div #logo en absolute et celui de #annonces en flux normal.
Modifié par tankia (11 Apr 2007 - 14:22)