CSS: pb de float

Marsh Posté le 09-08-2005 à 15:38:05

salut
j'ai un petit problème de css. j'aimerais bien faire ça:

et ça marche bien avec IE, mais pas du tout avec firefox. je suppose donc que c'est mon css qui est pas bon, mais j'arrive pas à m'en sortir. d'habitude en tatonnant un peu ça passe...

le code html:

Code :

<div id="home">
<h3>Pourquoi passer par nous?</h3>
<div id="home1">
<h4><span>Des taux de crédit bas</span></h4>
<p>Vous avez la certitude d'obtenir <span class="gros">les taux de crédit parmi les plus bas</span> ! Nous démarchons pour vous toutes les grandes banques françaises afin de négocier le meilleur taux en fonction de votre situation.</p>
<p><span class="gros">Vous pouvez économiser jusqu'à 40%</span>* sur le coût de votre assurance de prêt grâce à notre partenariat avec <strong>Nextcap Finance</strong>.</p>
<p><span class="petit">* Pour un prêt de 75000 sur 15 ans, une différence de taux d'assurance annuel de 0,2% par rapport à l'assurance de la banque représente 2300 d'économies. <br />Produit de la gamme de nos compagnies partenaires</span></p>
</div>
<div id="home2">
<h4><span>Des services</span></h4>
<p>Grâce à notre équipe de conseillers, <span class="gros">vous gagnez du temps</span> (nous faisons les démarches de recherche à votre place) <span class="gros">et de l'argent</span> (nous vous conseillons pour monter au mieux votre projet de financement).</p>
</div>
<div id="home3">
<h4><span>150 de frais de dossier</span></h4>
<p>Les frais de dossier ne sont que de <span class="gros">150</span> et <strong>se substituent aux frais de dossier des banques</strong>. De plus, vous ne payez rien tant que le prêt n'est pas définitivement signé : <span class="gros">rien ne vous oblige à accepter nos propositions de prêt</span>.</p>
</div>
</div>

et un extrait du css :

Code :

#home h3 {
font-size: 1.4em;
border-bottom: 1px dotted #999;
}
#home img {
position: relative;
top: 5px;
}
#home1, #home2, #home3 {
display: block;
border: 1px dotted #999;
padding: 0;
width: 270px;
}
#home1 {
float: left;
margin-right: 15px;
}
#home3 {
margin-top: 16px;
}
#home h4 {
margin: 0;
padding: 0;
width: 270px;
height: 60px;
}
#home h4 span {
display: none;
}
#home p {
margin: 0;
padding: 5px;
text-align: justify;
}

si quelqu'un a une idée, merci

Reply

Marsh Posté le 09-08-2005 à 15:38:05

Reply

Marsh Posté le 10-08-2005 à 10:04:19

Une solution possible parmis d'autres :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Sit</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
padding: 1px;
width: 414px;
border: 1px solid black;
}
div {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
margin-top: 10px;
}
#home1 {
float: left;
height: 350px;
}
#home2 {
float: right;
}
#home3 {
float: right;
clear: right;
}
hr {
visibility: hidden;
width: 0;
height: 0;
border: none;
clear: both;
}
</style>
</head>
<body>
<h1>Site</h1>
<div id="home1"></div>
<div id="home2"></div>
<div id="home3"></div>
<hr />
</body>
</html>

le <hr> de la fin est la pour pousser le body en dessous des <div> en float. Ce n'est pas tres beau mais c'est IE qui impose cette technique (CSS2 permettant de faire plus elegant).

Reply

Marsh Posté le 10-08-2005 à 14:57:02

oh merci beaucoup :jap:
ça marche niquel en effet avec le <hr />
encore merci

Reply

CSS: pb de float

Sujets relatifs:

Leave a Replay