Div en float

Slt tlm,

j'ai mis une div (contenu) dans une div (conteneur). Cette div contenu est en float:left, seulement, si elle est plus grande (en hauteur) que la div conteneur, elle sort de la div conteneur.
Or je voudrais que la div conteneur s'agrandisse en fonction de la div contenu.
Comment faire cela?

Petite question subsidiaire, est-il possible de mettre deux div en float:left sans qu'elle se positionne cote a cote, mais l'une en dessous de l'autre?


Merci bp!
+++

maxroucool a écrit :
je voudrais que la div conteneur s'agrandisse en fonction de la div contenu.

Créer un contexte de formatage sur l'élément parent:

#conteneur {overflow:auto}

Au passage, une petite recherche préalable est toujours conseillée, ce genre de problème est pour le moins fréquent…

maxroucool a écrit :
Petite question subsidiaire, est-il possible de mettre deux div en float:left sans qu'elle se positionne cote a cote, mais l'une en dessous de l'autre?

Heu… ne pas les faire flotter?

Bonsoir maxroucool,

1/Tu peux mettre ce conteneur :
En position relative avec un overflow (auto,hidden)
En float également.

2/Oui

sélecteur { float:left;clear:both;}

Mais quel est l'intérêt ? C'est le comportement par défaut des éléments de rendu "bloc"...

A (re)lire

Bonne continuation,
Cdt,
Sylvain

*Grilled ? Yes, voir carbonisé
note pour moi même: Ne pas répondre alors qu'on est encore à l'apéro...
Modifié par 6l20 (30 Jan 2008 - 22:47)

6l20 a écrit :
note pour moi même: Ne pas répondre alors qu'on est encore à l'apéro...

Ah ça, l'apéro, c'est traître… surtout à cette heure tardive!
Au passage, la position relative que tu conseilles, c'est lié à l'apéro?

<h(ors)s(ujet)>

Benjamin D.C. a écrit :

Ah ça, l'apéro, c'est traître… surtout à cette heure tardive!

Meuh non...

Benjamin D.C. a écrit :

Au passage, la position relative que tu conseilles, c'est lié à l'apéro?

Meuh non...
Ceci dit, absolute, relative, flottante ça fonctionne tout de même, ou moi et Firefox il faut que nous allions dormir de suite ?!
</h(ors)s(service)>

6l20 a écrit :
absolute, relative, flottante ça fonctionne tout de même, ou moi et Firefox il faut que nous allions dormir de suite ?!

Je vote pour une bonne nuit de repos réparatrice!

Bonne nuit

OK, merci Ben et 6l20.

L'intérêt pour moi de mettre "float:left;clear:both;" c'est d'aligner des "modules" sur la droite de ma page, et de laisser le contenu de ma page sur la partie gauche.
Après si il y a une autre solution, je suis tout ouï car je ss loin d'être un pro du CSS.
Si je m'écoutais, je ferais un beau tableau avec plein de cellule pour mon design!


Merci bp!
+++

maxroucool a écrit :
OK, merci Ben et 6l20.
L'intérêt pour moi de mettre "float:left;clear:both;" c'est d'aligner des "modules" sur la droite de ma page, et de laisser le contenu de ma page sur la partie gauche.
Après si il y a une autre solution, je suis tout ouï car je ss loin d'être un pro du CSS.
Si je m'écoutais, je ferais un beau tableau avec plein de cellule pour mon design!
Merci bp!
+++

Je n'aurai pas dû te proposer cette "solution", mea culpa
Comme le dit Benjamin en substance un "float" flotte ou ne flotte pas...

Il y a bien évidemment différentes manières d'obtenir ce que tu souhaites, par exemple :

css :

#conteneur {
background:#856FDF;
border:1px solid white;
margin-left:auto;
margin-right:auto;
overflow:auto;
padding:10px;
width:Ce que tu veux;
}
p#gauche {
background:#CF5AE8;
float:left;
width:Ce que tu veux;

}
p#droite {
background:#414141;
width:Ce que tu veux;
}

A toi de mettre en forme comme tu le souhaites

html :

<div id="conteneur">
<p id="gauche">
Mon texte à gauche du div
</p>
<p id="droite">
Mon texte à droite du div
</p>

p, span, bloc, bref ce que tu veux

Je te laisse ces liens qui devraient t'aider à y voir plus clair sur le positionnement des balises en css :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Maitriser-le-positionnement-CSS-dans-toutes-les-situations

Pardonnes cette mauvaise orientation (et des quelques stupides digressions nocturnes )

Cdt,
Sylvain
Modifié par 6l20 (01 Feb 2008 - 14:32)

6l20 a écrit :
Comme le dit Benjamin en substance un "float" flotte ou ne flotte pas...

Hmm... oui et non. Certes, dans l'absolu c'est vrai, mais je crois que vous n'avez pas saisi la demande de maxroucool.

On peut tout à fait utiliser float pour mettre des blocs les uns en dessous des autres... mais à côté d'un autre bloc. Par exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	div.module {
		width: 200px;
		height: 100px;
		float: right;
		clear: right;
		margin: 0 0 20px 0;
		background: gray;
	}
	div#content {
		height: 460px;
		margin-right: 220px;
		background: burlywood;
	}
	</style>
</head>

<body>

<div id="module1" class="module">Module 1</div>
<div id="module2" class="module">Module 2</div>
<div id="module3" class="module">Module 3</div>
<div id="module4" class="module">Module 4</div>

<div id="content">
	Contenu principal.
</div><!-- #content -->

</body>
</html>

On peut bien sûr placer les blocs à gauche plutôt qu'à droite (trois propriétés à changer).

Mais on s'aperçoit qu'au final ça dessine une colonne de blocs (les modules) et une colonne principale. On pourra donc se simplifier la vie avec un conteneur supplémentaire côté HTML:

div id="modules">
	<div id="module1" class="module">Module 1</div>
	<div id="module2" class="module">Module 2</div>
	<div id="module3" class="module">Module 3</div>
	<div id="module4" class="module">Module 4</div>
</div><!-- #modules -->

<div id="content">
	Contenu principal.
</div><!-- #content -->

Et on retombe sur un design simple à deux colonnes.

hello florent

div.module {
		width: 200px;
		height: 100px;
		float: right;
		clear: right;
		margin: 0 0 20px 0;
		background: gray;
	}

float:right et clear:right ensemble, ça donne quoi ça ?

sinon, je suis pour ta deuxième solution.

OK Flo, c'est ce que j'avais fais au début avec un conteur "modules", mais si tu dis que c'est mieux, je vais faire comme ca!

Merci bp!
+++

verdan a écrit :
float:right et clear:right ensemble, ça donne quoi ça ?

Ben tu prends le code de page HTML/CSS complète que je propose, tu enregistre ça dans un fichier texte en local avec l'extension .html, et tu constates ça de toi-même.

génial ton truc !
moi qui croyais qu'il fallait mettre le clear dans l'élément suivant..

Re tlm,

je pensais que c'était résolu, mais en fait le overflow ne marche pas sur IE6.
Savez vous comment faire?

+++
Modifié par maxroucool (03 Feb 2008 - 10:13)

Un peu de lecture:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

OK, donc j'ai donné une largeur fixe à mon conteneur et ca marche, mais ca m'arrange pas des masses

Au fait, j'ai une autre question, pourquoi mes images n'ont pas la meme couleur sous FF et sous IE6/7.
Il se trouve que c'est IE qui interprète mal les couleurs, puisqu'elles sont différentes de celles que j'ai mis dans Photoshop.
Y'a pas un moyen d'esquiver cela?


Merci bp!
+++
Modifié par maxroucool (03 Feb 2008 - 18:46)

maxroucool a écrit :
OK, donc j'ai donné une largeur fixe à mon conteneur et ca marche, mais ca m'arrange pas des masses

Un zoom: 1 peut faire l'affaire également (dans l'idéal, on le placera dans une feuille de correctifs CSS appelée via un commentaire conditionnel visant IE 6 et inférieurs).

maxroucool a écrit :
Au fait, j'ai une autre question, pourquoi mes images n'ont pas la meme couleur sous FF et sous IE6/7.

S'il s'agit d'images PNG, c'est peut-être un problème de correction gamma. Il faut enregistrer les images sans correction gamma.

Slt Flo,

désolé de te harceler, mais j'ai beaucoup de questions!!

Pour le zoom, c'est nickel.

Pour les PNG qui changent de couleurs sous IE, j'ai cherché dans Photoshop, mais j'ai pas trouvé ou je pouvais changer la correction gamma.

Et encore une tite question,
est-ce qu'il est possible de passer une balise h2 en inline? Car je n'ai pas envie que mes titres coupent mes paragraphes, mais qu'ils soient intégrés dedans.

h2, h3, h4, h5, h6{
	display:inline;
}

Ce code ne marche pas chez moi.


Merci bp!
+++

maxroucool a écrit :
Pour les PNG qui changent de couleurs sous IE, j'ai cherché dans Photoshop, mais j'ai pas trouvé ou je pouvais changer la correction gamma.

Je n'utilise pas Photoshop pour ma part (ou alors très ponctuellement), donc aucune idée. Je travaille souvent avec The GIMP, qui gère ça très bien.
Photoshop est un peu une bouse pour la gestion du PNG. Il y a des utilitaires tels que PNGcrush (de mémoire...) qui permettent de recompresser les images PNG pour gagner en taille et corriger les problèmes de correction gamma.

maxroucool a écrit :
est-ce qu'il est possible de passer une balise h2 en inline?

Oui: h2 {display: inline;}.

maxroucool a écrit :
Ce code ne marche pas chez moi.

Est-ce que ton paragraphe est également en inline? Parce qu'un élément de type bloc passe à la ligne même si l'élément qui le précède est en affichage de type en-ligne.

Donc théoriquement tu devrais avoir:

#content h2 {display: inline;}
#content h2 + p {display: inline;}

par exemple (je préfixe avec #content juste pour donner un exemple de règle qu'on restreindrait aux h2 enfants ou descendants d'un div#content par exemple).