28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai trois blocs les uns au dessus des autres et la partie basse du troisième et dernier bloc ne se voit pas sur FireFox mais par contre je le vois sur IE

Voici le HTML



<div class="carre_gauche">



<div class="cadre_arrondi_haut_240">

Informations pratiques
		
</div>


<div class="carre02">


	<div class="carre03_int01">
	
	<br />

	Nombre d'adultes : <br /> <br />

	Nombre d'enfants : <br /> <br />

	Nature du bien : <br /> <br />

	Nombre de personnes pouvant loger confortablement : <br /> <br />

	Nombre de pieces : <br /> <br />

	Nombre de chambres : <br /> <br />

	Nombre de lits 1 place : <br /> <br />

	Nombre de lits 2 places : <br /> <br />

	Nombre de canapé-lits : <br /> <br />


	</div>

	<div class="carre03_int02">

	<br />

	2 <br /> <br />

	2 <br /> <br />

	<img style="margin-bottom:25px;" src="images/ico_maison02.png" TITLE="Maison">

	5 <br /> <br />

	4 <br /> <br />

	3 <br /> <br />

	1 <br /> <br />

	1 <br /> <br />

	2 <br /> <br />


	</div>

</div>

<div class="cadre_arrondi_bas_240">


		
</div>

<div class="cadre_arrondi_haut_240">

Où et Quand
		
</div>


<div class="carre03">



	<div class="rectyy">
		Chine (Asie) <br />
		du 24/04/10 au 30/06/10 <br />
	</div>

	<div class="rectyy">

		Chine (Asie) <br />
		du 24/04/10 au 30/06/10 <br />
	</div>

	<div class="rectyy">
		Chine (Asie) <br />
		du 24/04/10 au 30/06/10 <br />

	</div>

	<div class="rectyy">
		Chine (Asie) <br />
		du 24/04/10 au 30/06/10 <br />
	</div>

	<div class="rectyy">
		Chine (Asie) <br />

		du 24/04/10 au 30/06/10 <br />
	</div>


</div>

<div class="cadre_arrondi_bas_240">


		
</div>

<div class="cadre_arrondi_haut_240">

Informations supplémentaires
		
</div>


<div class="carre04">



	<div class="rectyy">
		Climatisation
	</div>

	<div class="rectyy">
		Baignoire
	</div>

	<div class="rectyy">
		Douche
	</div>

	<div class="rectyy">
		Piscine
	</div>

	<div class="rectyy">
		Fumeurs Non souhaités
	</div>

	<div class="rectyy">
		Internet
	</div>

	<div class="rectyy">
		Parking
	</div>

	<div class="rectyy">
		Vélo à disposition
	</div>

	<div class="rectyy">
		Véhicule indipensable
	</div>

	<div class="rectyy">
		Véhicule à dispostion
	</div>

	<div class="rectyy">
		Langues parlées <br />

		Anglais, Français, Allemand, Russe, Japonnais, etc...
	</div>



</div> 

<div class="cadre_arrondi_bas_240">


		
</div>




</div> 







Ce que je vois pas c'est donc





<div class="cadre_arrondi_bas_240">


		
</div>



Et voici le css





.carre_gauche
{
width:280px;
float:left;
}


/* ci dessous non interprété par IE */
html>body .carre_gauche
{
height: auto;
overflow:hidden;
} 

.carre02
{
margin-left:20px; 
width:240px;
height:250px;
background-image: url('../images/cadre_arrondi_milieu_240.jpg');
background-repeat:repeat-y;
padding:2px;
border:none;
/*float:left;
display:inline;*/
}


/* ci dessous non interprété par IE */
html>body .carre02 
{
height: auto;
min-height:250px;
overflow:hidden;
} 

.carre03
{
margin-left:10px; 
width:240px;
height:100px;
margin-left:20px; 
border:none;
text-align:center;
padding:2px;
background-image: url('../images/cadre_arrondi_milieu_240.jpg');
background-repeat:repeat-y;
/*float:left;
display:inline;*/
}


/* ci dessous non interprété par IE */
html>body .carre03 
{
height: auto;
min-height:100px;
} 


.cadre_arrondi_haut_240
{
margin-top:15px;
margin-left:20px;
width:240px;
height:48px;
border:none;
background-image: url('../images/cadre_arrondi_haut_240.jpg');
text-align:center;
}

.cadre_arrondi_bas_240
{
margin-left:20px;
width:240px;
height:30px;
border:none;
background-image: url('../images/cadre_arrondi_bas_240.jpg');
}



.rectyy
{
background-color:rgb(238,238,238);
margin-bottom:5px;
border:none;
width:235px;
text-align:center;
font-size:11px;
}


.carre04
{
width:240px;
height:50px;
margin-left:20px; 
border:none;
float:left;
display:inline;
padding:2px;
background-image: url('../images/cadre_arrondi_milieu_240.jpg');
background-repeat:repeat-y;
}


/* ci dessous non interprété par IE */
html>body .carre04 
{
height: auto;
min-height:50px;
} 



Merci d'avance pour votre aide.
Modifié par samb01 (25 Jun 2010 - 09:36)
bonsoir,

ton element vide reste sous carre04 qui est flottant . Fait en sorte qu'il se dégage des flottant , avec clear par exemple

gc
Bonjour gc-nomade et merci, tu m'as mis sur la piste.

J'ai retiré le float:left et le display:inline de carre04 et ça fonctionne.


Encore Merci.