28173 sujets

CSS et mise en forme, CSS3

Trop de float tue le float

Salut à tous,

Je code actuellement un design qui comporte pas mal de bloc flottant, mais voila arrivé à un moment Firefox se perd et ne respecte plus mes hauteurs automatiques.

Extrait page html :
	<div class="corps">
		<div class="top">
			<div class="log_membre"></div>
			<div class="pub1"></div>
			
		</div>
		<div class="middle">
			<div class="gauche">
				<div class="alaune">
				<h1>A la Une</h1>
					<div class="une1"></div>
					<div class="une2"></div>
					<div class="une3"></div>
				</div>
			</div>
			<div class="droite">
				<div class="emission">test</div>
				<div class="pub2"></div>
				<div class="forum"></div>
			</div>
		</div>
		<div class="bas">
		</div>
	</div>


Lorsque j'utilise des float sur les bloc "gauche" et "droite" , sous firefox, il ne sont plus interprété comme faisant partie du bloc pere "corps". En revanche si je retire les float sur les bloc tout rentre dans l'ordre mais la structure désiré n'est plus respectée.

Extrait css :
.corps
{
	width:1000px;
	background-color:#fff;
	min-height:100%;
    height : auto!important;
}
	/************* Partie membre + pub********************/
	.top
	{
		width:960px;
		height:90px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:10px;
	}
		.log_membre
		{
			float:left;
			width:230px;
			height:90px;
			background:url(struct/bg_log_membre.gif) no-repeat;
			margin-right:1px;
		}
		.pub1
		{
			float:left;
			width:728px;
			height:90px;
			background:url(struct/motif_pub.gif) repeat;
			margin-left:1px;
		}
	/************* Contenu********************/
	.middle
	{
		width:960px;
		min-height:auto;
		height : auto!important;
		margin-left: auto;
		margin-right: auto;
	}
		.gauche
		{
			float:left;
			width:640px;
			margin-right:10px;
			min-height:100%;
   			height : auto!important;
		}
		.gauche h1
		{
			background:url(struct/h1_titre.gif) repeat-x;
			width:100%;
			height:26px;
			color:#FFFFFF;
			font-weight:bold;
			font-size:12px;
		}
			.alaune
			{
				height:190px;
				width:640px;
				background-color:#FF0000;
			}
		.droite
		{
			float:right;
			width:300px;
			margin-left:10px;
			min-height:100%;
   			height : auto!important;
		}

Une petite image pour illustrer la chose :
upload/2013-Sanstitre-9.jpg
Dans le premier cas "corps" englobe bien les deux blocs alors quand dans le deuxieme cas , le fond des bloc est noir et donc "corps" ne les englobe pas.

J'avoue être un peu perdu dans l'état actuel des choses. Si quelqu un à une idée pour me dépanner Smiley smile
Modifié par GrUnK (14 Aug 2007 - 15:49)
Salut Grunk,

Heu... là... concrètement, je n'ai pas compris où était ton problème. J'ai fait un copier-coller de ton code, et j'obtiens quelque chose qui n'a rien à voir (à vue d'oei), avec ton image...
L'idéal serait que tu isoles ton problème, ça nous permettrait de mieux comprendre... D'ailleurs le fait de l'isoler, si ça se trouve, te donnerait tout de suite la solution, car cela te recentrerait sur le problème.

A bientôt,
Dzana
Salut,
En fait j'ai deja isoler le problème mais je vois que avec le css actuel on ne le voit pas comme tu l'as préciser.

En utilisant ce css :
.corps
{
	width:1000px;
	background-color:#fff;
	min-height:100%;
    height : auto!important;
    border : 1px solid #000;
}
	/************* Partie membre + pub********************/
	.top
	{
		width:960px;
		height:90px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:10px;
	}
		.log_membre
		{
			float:left;
			width:230px;
			height:90px;
			background:url(struct/bg_log_membre.gif) no-repeat;
			margin-right:1px;
		}
		.pub1
		{
			float:left;
			width:728px;
			height:90px;
			background:url(struct/motif_pub.gif) repeat;
			margin-left:1px;
		}
	/************* Contenu********************/
	.middle
	{
		width:960px;
		min-height:auto;
		height : auto!important;
		margin-left: auto;
		margin-right: auto;
                border:1px solid #000;
	}
		.gauche
		{
			float:left;
			width:640px;
			margin-right:10px;
			min-height:100%;
   			height : auto!important;
		}
		.gauche h1
		{
			background:url(struct/h1_titre.gif) repeat-x;
			width:100%;
			height:26px;
			color:#FFFFFF;
			font-weight:bold;
			font-size:12px;
		}
			.alaune
			{
				height:190px;
				width:640px;
				background-color:#FF0000;
			}
		.droite
		{
			float:right;
			width:300px;
			margin-left:10px;
			min-height:100%;
   			height : auto!important;

		}


Tu verra que le bloc "corps" contient bien le bloc "middle" mais que les bloc "gauche" et "droite" ne sont pas contenu dans "middle". Ils se trouvent en dessous des deux bloc parent.
Si j'enlève le float de "gauche" et "droite" en revanche il remonte bien au bon endroit.
J'en deduis donc que le problème vient des float mais je ne sais pas quoi faire pour conserver ces float et placer les deux bloc dans leur bloc parent.

En espérant avoir été plus clair
Salut,

Peut-etre seras-tu heureux en rajoutant dans ta feuille de style :


.bas
{
    clear:both;
}

Modifié par CyemJ (15 Aug 2007 - 13:47)
En effet ca résoud le problème. J'y avais bien penser mais je ne l'avais pas mis au bon endroit Smiley smile

Merci pour le coup de main
Sujet clos
Aller à