28173 sujets

CSS et mise en forme, CSS3

[Résolu] Une div qui n'englobe pas une balise Object sur Firefox

Bonjour à tous !

Je vous explique mon problème : j'ai deux divs ("contenu" et "footer") qui sont respectivement l'une au dessus de l'autre à l'intérieur d'une div "conteneur". La div "contenu" contient un objet : <object>...</object> (c'est le dewslider pour faire un peu de promo Smiley cligne ).

J'obtiens 2 affichages différents entre IE7 et Firefox
IE7
upload/4188-IE7.JPG


Firefox
upload/4188-FF.JPG

La div entourée de violet est la div "contenu" et la div entourée en orange est la div "footer".
J'aimerai obtenir un afficahe comme sur IE7 c'est à dire que la div "footer" prendra place directement en dessous de l'objet. Actuellement, la div "contenu" s'arrête au dessus du bas de l'objet.

Voici l'html :
<div id="conteneur">
<div id="contenu">
<object>...</object>
</div>
<div id="footer">...</div>
</div>


Voici le css :
#conteneur {
	position:relative;
	width:840px;
	margin:30px auto;
}
#contenu {
	position:relative;
	width:100%;
}
#contenu object {
	float:left;
	width:450px;
	height:480px;
}
#footer {
	position: relative;
	width: 100%;
	height: 35px;
}


Je pourrai régler ce problème en mettant un padding-top au sein de ma div contenu mais ce n'est pas l'idéal.

Merci de voitre aide.
Modifié par Mucsy (07 Mar 2007 - 10:15)
Bonjour,

Je ne sais pas si j'ai tout compris sans exemple en ligne mais bon ! Peut être
<style type="text/css">	

#conteneur {
	position:relative;
	width:840px;
	margin:30px auto;
	border: 1px solid black;
}

#contenu {
	position:relative;
	overflow: hidden;
	width:100%;
	border: 1px solid red;
}

#contenu object {
	float:left;
	width:450px;
	height:480px;
	border: 1px solid green;
}

#footer {
	position: relative;
	clear: left;
	width: 100%;
	height: 35px;
	border: 1px solid blue;
}

</style>
</head>
<body>
<div id="conteneur">
	<div id="contenu">
	<object>...</object>
	</div>
	<div id="footer">...</div>
</div>
</body>
Sujet clos
Aller à