28173 sujets

CSS et mise en forme, CSS3

[Resolu] Float dans un float

Bonjour,

Voici l'exemple qui me pose problème :
http://www.annuaire-football.org/test.htm

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
div#menu {
	background-color: #FFE680;
	width: 160px;
	margin-left: 10px;
	float: left;
	margin-right: 30px;
}
div#contenu, div#categorie {
	margin-left: 200px;
}
div#categorie {
	margin-right: 20px;
}
div#categorie h2 {
	width: 300px;
	margin-right: 20px;
	margin-bottom: 10px;
	float: left;
	color: #999999;
	font-size: 0.95em;
}

-->
</style>
</head>

<body>
<div id="menu">
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla </p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla blabla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
	<p>bla bla bla</p>
</div>
<div id="categorie">
	<h2>Categorie 1 </h2>
	<h2>Categorie 2 </h2>
	<h2>Categorie 3 </h2>
	<h2>Categorie 4 </h2>
	<h2>Categorie 5 </h2>
	<h2>Categorie 6 </h2>
	<h2>Categorie 7 </h2>
	<h2>Categorie 8 </h2>
	<h2>Categorie 9 </h2>
	<h2>Categorie 1 0 </h2>
	<h2>Categorie 1 1 </h2>
	<h2>Categorie 1 2 </h2>
	</div>
<div id="contenu">bla bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla  bla bla bla </div>
</body>
</html>


Comment faire en sorte que le texte dans le bloc bleu ciel se positionne sous les catégories et à droite du bloc jaune ?
J'ai bien sur essayer le clear:both mais ça annule tous les flottements donc mon texte se retrouve sous le bloc jaune.

Merci d'avance
Modifié par tannoy (28 Dec 2005 - 12:28)
Tu fais :

<div style="float:left;width:100px">jaune</div>
<div style="float:left;width:500px;background:blue;">
  <div>categorie</div>
  <div>blabla</div>
</div>
Merci mais je n'ai peut-être pas été assez précis dans mes explications.

Le div des catégories doit occuper tout l'espace restant en largeur.
Le div du blabla doit venir se positionner juste en dessous celui-ci.
Ces deux div se trouvant à gauche du div jaune.

Il y a donc un premier float:left pour le div jaune puis un float:left sur chaque h2 du div catégorie. Mon div de blabla doit pouvoir annuler le float des h2 sans pour autant annuler le float du div jaune. Or si je place un clear:both sur le div de blabla, tous les float sont annulés.

Que faire ?
Modérateur
bonjour
place le div menu en absolute, comme ça il n'y a plus de float interferant.
a plus

edit, + le clear:left bien entendu Smiley smile
comme ceci:
div#menu {
	background-color: #FFE680;
	width: 160px;
	position:absolute;
	margin-left: 10px;/*utiliser un left:xxpx; au lieu du margin(absolu)*/
}
div#contenu, div#categorie {
	margin-left: 200px;clear:left;
}

</edit>
Modifié par gcyrillus (25 Dec 2005 - 15:12)
Bonjour,

Il est également possible de le faire en conservant le menu flottant, en créant un nouveau contexte de formatage à l'aide d'un <div id="wrapper"> autour des catégories et du texte.



div#contenu {
clear: left;
}
#wrapper {
overflow: auto;
}
-->
</style>

<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
overflow: visible;
height: 1%;
} 
</style>

<![endif]-->


(voir FAQ du forum pour la syntaxe du commentaire conditionnel)
Modifié par Laurent Denis (22 Dec 2005 - 02:19)
Merci à tous pour vos réponses.

Laurent :

Merci pour ta solution. Par contre, pourrais-tu m'expliquer plus en détail car je t'avoue que je n'ai pas tout compris.

Pour le clear left, pas de souçi par contre que fais le div en overflow par rapport au flottant ?

merci
Modifié par tannoy (22 Dec 2005 - 15:01)
Bonjour,

On utilise une conséquence peu connue de l'overflow : il permet au conteneur de créer ce que CSS appelle un contexte de formatage. C'est un espace particulier, dont l'un des effets est de limiter l'action de la propriété clear : elle réagit aux flottants situé dans le conteneur (les catégories), mais pas aux flottants placés hors de celui-ci (le menu). Voir http://www.w3.org/TR/CSS21/visuren.html#flow-control

overflow n'est qu'une des propriétés qu'on peut utiliser pour créer un contexte de formatage : on peut utiliser, selon les cas, float, position:absolute, display:inline-block et display:table-cell. Voir http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Dans IE Windows, en revanche, l'overflow (et une partie des autres propriétés ci-dessus) n'est pas correctement implémenté et ne produit pas l'effet attendu. D'où la CSS en commentaires conditionnels qui joue sur un bug de haslayout aboutissant au même résultat : le conteneur doté de layout par la propriété height limite l'action du clear de la même façon. Voir http://test.blog-and-blues.org/haslayout/tests/float2.html
Sujet clos
Aller à