28172 sujets

CSS et mise en forme, CSS3

Bonjour

Après plusieurs années de développement en utilisant les tableaux, je m'oblige à développer de plus en plus avec le CSS et je bute déjà sur un problème tout bête.
Au lieu de faire un grand discours, voici ce que donne ma page simplifiée sur IE : http://www.freelance-internet.com/ie.jpg
C'est le résultat que je souhaite obtenir.

Par contre, sur firefox : http://www.freelance-internet.com/ff.jpg

Le div CONTENU a un fond de couleur vert et contient un div jaune + un div orange. On devrait donc retrouver le vert à droite du orange mais non...

Voici le code de ma page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="../style/general4.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">
<!-- Début header -->
<div id="header">
MON HEADER
</div>
<!-- Fin header -->
<!-- Début contenu -->
<div id="contenu">
<div id="HomeColonne1">
  <p>COLONNE1<br />
    COLONNE1<br />
    COLONNE1</p>
  <p><br />
    FOND JAUNE<br /> 
      <br />
    COLONNE1<br />
    COLONNE1<br />
    COLONNE1<br />
    </p>
</div>
<!-- FIN COL1 -->
<div id="HomeColonne2">COLONNE2<br />
COLONNE2<br />
COLONNE2<br />
<br />
FOND ORANGE <br />
<br />
COLONNE2<br />
COLONNE2<br />
COLONNE2</div>
</div>
<!-- FIN CONTENU -->
<!--<div id="footer">FOOTER</div> -->
</div>

<!-- FIN CONTENEUR -->

</body>
</html>


Et celui de la CSS
*{
	padding: 0px;
	margin: 0px;
}
body {
	background-image: url(../images/background.jpg);
	background-repeat: repeat;
	background-position: center top;
	/*margin: 0px;
	padding: 0px;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;	
}
#conteneur {
	width: 820px;
	margin: auto;
	/*text-align:center;*/
	height: 100%;
	/*border:1px solid #FFFFFF;*/
}

/* HEADER ----------------------------------------------------------------------- */
#header {
	width:100%;
	background-image: url(../images/header/fond_pub.jpg);
	background-repeat: repeat-x;
	height:130px;
}
#logo {
	width: 270px;
	float:left;
}
#pub1 {
	width:549px;
	float:left;
	margin-top: 20px;
	margin-left: 1px;
}
#pub1 img {
	border: 1px solid #3C3C3C;
}
/* CONTENU ----------------------------------------------------------------------- */
#contenu {
	width: 798px;
	/*height:400px;*/
	height:100%;
	margin-top: 4px;
	margin-left: 18px;
	border: 1px solid #FFFFFF;
	background-color: #33CC33;
}
/* HOME ----------------------------------------------------------------------- */
#HomeColonne1 {
	width: 290px;
	float:left;
	height:100%;
	background-color: #FFFF00;
	color: #000000;
}
#HomeColonne2 {
	width: 210px;
	float:left;
	height:100%;
	background-color: #FF6600;
}


C'est forcément tout con mais je ne trouve pas...
Modifié par freelance28 (24 May 2008 - 22:32)
Salut,

Tes blocs homecolonne sont en float donc hors du flux, ton bloc contenu ne peut donc pas "suivre" Smiley cligne
Un overflow: auto (ou hidden) sur #contenu devrait rectifier ce problème.