28173 sujets

CSS et mise en forme, CSS3

[Résolu] Float : sortie de flux sous firefox, IE ok...

Bonjour, suite à mon précédent post, j'ai tenté de reprendre mon code à zéro pour comprendre mon problème de positionnement. J'ai trouvé le problème mais n'arrive pas à le résoudre. J'ai deux div à l'intérieur d'un autre. Celui-de gauche en float: left et celui de droite, en float... right Smiley smile . Je suis passé par ça car sinon firefox m'affichait le div de droite sous celui de gauche...

Le soucis vient du fait que firefox fait apparemment sortir les divs du flux et ne garde par le height auto du conteneur, le color-background n'a donc plus d'effet...

Pouvez vous m'aider à résoudre mon problème ?


<body>
  
<div id="cadre"> 
  
	<div id="header">
	
	</div>
 
	<div id="corps">
		  <div id="texte">
		  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
		  </div>
		  
		  
		  <div id="menu">
		  AAAAA</br>
		  AAAA</br>
		  AAAA</br>
		  AAAA</br>
		  </div>
	</div>  

</div> 
</body>




*{text-align:justify;}

div {border: 1px solid red}


#cadre{
	width:750px;
}

#header {
	background-image: url(images/header.jpg);
	margin-left:auto;
	margin-right:auto;
	width:700px;
	height:223px;
}

#corps {
	width:700px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFCF3;
}

#texte {
  float:left;
  margin: 0 2% 0 0; 
  width: 400px;
  padding:1em;
}

#menu {
float:right;
width:150px;
 padding: 1em;

}

Modifié par choncha (03 Jan 2007 - 00:27)
J'ai trouvé ma solution dans vos FAQ :

j'ai rajouté overflow:auto; dans mon css pour le conteneur des deux divs...
Sujet clos
Aller à