28172 sujets

CSS et mise en forme, CSS3

Positionnement et gestion largeur d'un div

Bonsoir,

Avant de poster ce message, j'ai pas mal cherché sur ce site et ailleurs, une solution.
Je me suis inspiré d'une astuce sur ce site, pour vous présenter mon problème.

Mon code source : 

<html>
<head>
<style>
	.jaune {
	background-color: #ffff00;
	float: right;
	width: 100px;
	height:100%;
	text-align: center;
	margin: 0;
	}
	
	.rouge{
		background-color: red;				
	}
	
	.verte {
	width: 100%;
	background-color: #00ff00;
	height:100%
	}
	
	.purple{
	background-color: purple;
	}

</style>
</head>
<body>
	<div class="verte">
		<div class="jaune">1</div>		
		<div class="purple">2</div>
		<div class="rouge">3</div>		
	</div>
</body>
</html>


screen_1
[EDIT Laurie-Anne : Image trop grande] http://img30.imageshack.us/img30/4504/sc1l.gif

screen_2 (div rouge mis en évidence)
[EDIT Laurie-Anne : Image trop grande] http://img340.imageshack.us/img340/8263/sc2.gif

Comme vous pouvez le constater sur le deuxième screenshot, le div rouge (et d'ailleurs le violet aussi) passe sous le div jaune.
J'aurais souhaité que le div rouge fasse une largeur de 100% de la place disponible, sans déborder sous le div jaune.

Je sais que le width:100% prend 100% du parent et pas de la place dispo, surtout en utilisant des float.
ET c'est bien là que je bloque, pensez vous qu'il y ait une solution ?
L'utilisation des float est elle adapté pour ce que je recherche ?

D'avance merci,
Sébastien
Modifié par Laurie-Anne (20 Nov 2009 - 12:30)
bonsoir,

tout d'abord fait usage d'un doctype valide , cela va grandement te faciliter la tache pour la suite et t'assurer un rendu en mode standard.

Ensuite , pour IE applique la regle : zoom:1; (voir/chercher: haslayout + flottants dans IE lte7 )
Pour les autres navigateurs : overflow:hidden; (voir/chercher: contexte de formatage)

En modifiant le "contexte de formatage" , les elements dans le flux ne passeront plus sous les flottants qui les précedent.

GC
Sujet clos
Aller à