28172 sujets

CSS et mise en forme, CSS3

Placement erroné sous IE8 et FF avec float

Bonjour
j'ai un petit bout de code qui marche bien sous IE7 ais pas ous IE8 ni sous FF pourtant c'est tout simple
pouvez vous me dire ou est le probleme, svp, merci
Nadege

<div id="principal">

  <div id="contenu">
    <div id="contenu-gauche">Placez ici le contenu de  id "contenu-gauche"</div>
    <div id="contenu-droit">Placez ici le contenu de  id "contenu-droit"</div>
    
  </div>
  <div id="pied" class="texte-courant">Placez ici le contenu de  id "pied"</div>
</div>

#principal {
	width: 948px;
	margin-left: -474px;
	position: relative;
	left: 50%;
}


#contenu {
	position: relative;
	width: 948px;
	margin-top: 28px;
}
#pied {
	height: 30px;
	width: 948px;
	text-align: center;
	padding-top: 10px;
}

#contenu-gauche {
	height: 300px;
	width: 450px;
	margin-left: 20px;
	border-bottom-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #333333;
	position: relative;
	float: left;
}
#contenu-droit {
	background-color: #CCCCCC;
	position: relative;
	height: 200px;
	width: 450px;
}
Salut,

Crois tu qu'avec un code incomplet et aucune page en ligne, on va non seulement arriver à trouver une solution à ton problème, mais en plus identifier le dit problème ?? Il serait bon que tu nous fournisse un minimum d'informations, notamment la description du problème que tu constate. Sans cela je pense que ton sujet reste sans réponse. Smiley cligne
Bonjour
Le site n'est pas en ligne je le teste, voici la totalité du code + une capture ecran du resultat obtenu et de celui souhaité.
Le bloc contenu-droit se "sépare" en 2 son fond est completement a gauche et son contenu en dessous...ni l'un ni l'autre ne sont a l'endroit logique c'est a dire dans le flux a droite du bloc vert.
Merci de votre aide


@charset "utf-8";
body {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}
#principal {
	width: 948px;
	margin-left: -474px;
	position: relative;
	left: 50%;
}


#contenu {
	position: relative;
	width: 948px;
	margin-top: 28px;
}
#pied {
	height: 30px;
	width: 948px;
	text-align: center;
	padding-top: 10px;
	background-color: #966;
}

#contenu-gauche {
	height: 300px;
	width: 450px;
	margin-left: 20px;
	border-bottom-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #333333;
	position: relative;
	float: left;
	background-color: #0C0;
}
#contenu-droit {
	background-color: #CCCCCC;
	position: relative;
	height: 200px;
	width: 450px;
}


.texte-courant {
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	text-align: justify;
}


<body>
<div id="principal">

  <div id="contenu">
    <div id="contenu-gauche">Placez ici le contenu de  id "contenu-gauche"</div>
    <div id="contenu-droit">Placez ici le contenu de  id "contenu-droit"</div>
    
  </div>
  <div id="pied" class="texte-courant">Placez ici le contenu de  id "pied"</div>
</div>
</body>

upload/18943-Sans-titre.jpg
Salut,

Passe tes 4 div en float:left; (#contenu, #contenu-gauche, #contenu-droit, #pied) et ajoute un clear:both; à #pied.

J'ai pas eu le temps de tester mais ça devrait être bon.
Sujet clos
Aller à