28172 sujets

CSS et mise en forme, CSS3

Quelques éclaircissements sur le positionnement float...

Hello Smiley cligne

j’ai quelques soucis de compréhension concernant le positionnement float.
Puisqu’un exemple vaut mieux qu’un long discours voici où je cale...

Exemple 1
J’ai ici deux boîtes <div> dont seule la première boîte est positionnée en float, cette première boîte étant positionnée en float sors du flux et vient se câler en haut à gauche de la fenêtre du navigateur.
La deuxième boîte n’a pas de positionnement particulier, disons qu’elle suit le flux. Puisque la première boîte est sortie du flux c’est la deuxième boîte qui vient prendre la place de la première, mais son contenu reste en dessous de la première.
Si je veux mettre côte à côte les deux boites je dois donner un positionnement float aussi à la deuxième boité ou lui donner une marge de gauche qui correspond à la largeur de la première boîte.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
.colonne {
	width:300px;
	margin-bottom:0;
}
#col1 {
	float:left;
	background-color:#FF9;
}
#col2 {
	background-color:#F9C;
}
</style>
<title>Document sans nom</title>
</head>

<body>
<div class="colonne" id="col1">
  <h2>Pemière colonne</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="colonne" id="col2">
  <h2>Deuxième colonne</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>


Exemple 2
Ici j’ai la même configuration que dans l’exemple 1 sauf avec une balise paragraphe et une balise de titre qui sont tout de même des balises de type bloc comme les balises <div> . Le comportement est différent ici, en effet le contenu de mes paragraphes se met côte à côte sans y avoir donné une quelconque propriété.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
.titre {
	background-color:#CC3333;
	float:left;
}
#col1 {
	background-color:#CC6;
}
#col2 {
	background-color:#C93;
}
</style>
</head>

<body>
<h2 class="titre">Pemière colonne</h2>
<p id="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="titre">Deuxième colonne</h2>
<p id="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>


Comment explique-t-on ce comportement?
Pourquoi la balise <div> a-t-elle un comportement différent avec la propriété float?

Merci.
Modifié par porcini (05 Oct 2012 - 21:54)
bonsoir,

enleve la couleur de fond a #col1 ou met en marge auto #col2 pour comprendre ce qu'il se passe .

Ou, ajoute juste a ton code CSS (.colonne ou #col2) : overflow:hidden;

Enfin, fait une recherche ou une révision sur les flottants et les contextes de formatage Smiley smile .

++
Bonsoir,
merci pour la réponse Smiley cligne
En effet, si prends l'exemple 1, avec la règle overflow:hidden la deuxième boîte <div> et le contenu se placent côte à côte avec la première boîte div, mais ce que j'aurai plutôt voulu savoir c'est pourquoi ce comportement qu'avec les boîtes <div> et non avec les autres éléments de type bloc.
Si je prends l'exemple 2, le paragraphe prends bien la place du titre <h2> puisque celui-ci sort du flux, par contre le contenu du paragraphe se place bien à côte du titre et non en dessous comme c'était le cas dans l'exemple 1 avec les boîtes <div>...
Pourquoi les boîtes <div> ne se comportent pas de la même manière?
Sujet clos
Aller à