Discussion :

[noftal]

Bonjour,

J'ai un élément "container" qui contient un élément "blog-content" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#container{
   position: relative;
   max-width: 980px;
   width: 100%;
   margin-right: auto;
   margin-bottom: 10px;   
   margin-left: auto;
   border-top: 1px solid #cdcdcd;   
   border-right: 1px solid #cdcdcd;   
   border-bottom: 1px solid #cdcdcd;   
   border-left: 1px solid #cdcdcd;               
   box-shadow: 0 0 5px #cccccc;       
   background-color: #ffffff;  
   height: auto;   
   }
 
#blog_content {
float: none;
width: 500px;
margin-bottom: 20px;
}

Maintenant, je voudrais ajouter un 2ème élément "sidebar" dans mon container.

J'ai cru bon de modifier la propriété float de blog_content comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#blog_content {
float: left;
width: 500px;
margin-bottom: 20px;
}
 
.sidebar {
float: right;
width: 225px;
margin: 20px 0 20px 25px;
}

Mais ceci ne marche pas, mon les éléments blog_content et sidebar apparaissent sous mon container qui est donc vide.

Où est l'erreur ?

[NoSmoking]

Bonjour,
le code HTML de ta structure serait un réel plus pour que l'on puisse t'aider

[noftal]

Comme il y a beaucoup de code qui, a priori n'a rien à voir avec mon pb, je vais élaguer au risque de supprimer des choses qui peuvent expliquer :

index.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="container">
<div id="blog_content">
...
</div> /* fin div blog_content */
<?php get_sidebar(); ?> 
>/div> /* fin div container */
<?php get_footer(); ?>

sidebar.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="sidebar">
...
</div>

footer.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="footer">
...
</div>

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#footer{
   clear: both;
   margin: 10px 0;
   padding-top: 10px;
   border-top: 1px dotted #cccccc;                             
   overflow: hidden;  
   text-align: center; 
   display: block; 
}

Il y a quand même un truc bizarre : les éléments blog_content apparaissent bien centrés comme si le le float left et le float right était bien pris en compte, mais ils sont quand même sous le container.

[noftal]

En cherchant sur le Net je suis tombé par hasard sur une solution qui marche.
Il faut rajouter la ligne en rouge :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="container">
<div id="blog_content">
...
 
</div> /* fin div blog_content */
<?php get_sidebar(); ?>
<div style="clear: both;"></div>
</div> /* fin div container*/

Mais je ne m'explique pas pourquoi ça marche parce que, après ma sidebar, l'élément suivant est "footer" dont la propriété commence justement par un clear: both

Si qqun peut m'expliquer. J'aime pas trouver des solutions sans les comprendre.

[NoSmoking]

Ton soucis vient du fait que la DIV container n'a pas de réelle hauteur, les éléments en float étant retirés partiellement du flux, c'est un problème de dépassement des flottants.

Tu aurais également pu résoudre ton problème en ajoutant overflow:hidden; sur ton bloc #container.

Petite remarque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
border-top: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
border-left: 1px solid #cdcdcd;

peut simplement s'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border: 1px solid #cdcdcd;

[noftal]

Merci pour cette réponse.
La solution overflow: hidden me semble beaucoup plus académique. Je la prends !

Toutefois, si ce n'est pas trop abuser, j'aurais 3 questions pour bien comprendre et éviter de refaire l'erreur la prochaine fois :
- Pourquoi la div container n'a pas de hauteur ? Y a-t-il des éléments qui en ont, d'autres pas, et à quoi on les reconnaît ?
- tu écris :

les éléments en float étant retirés partiellement du flux, c'est un problème de dépassement des flottants.

J'ai rien compris Tu peux reformuler ?

Enfin, peux-tu expliquer ce que signifie overflow: hidden ? J'utilise souvent ce site pour avoir des explications sur une propriété CSS, mais là, je reste sec, sans doute en raison de mes limites en anglais (overflow est un terme assez flou qui peut se traduire par plein de choses)

[Invité]

Bonjour,
je t'invite à quelques LECTURES :

• Les meilleurs cours et tutoriels CSS
• FAQ CSS
• Glossaire des propriétés CSS

et notamment :

• FAQ CSS - Comment faire pour qu'un conteneur englobe ses enfants flottants ?
• Glossaire - Limiter les dimensions | overflow

On trouve tout, sur DVP !
Et ça a l'avantage d'être rédigé en français

[noftal]

Merci.
Je ne comprends toujours pas bien le sens de cette phrase :

Un élément flottant (doté de la propriété float avec les valeurs left ou right) est partiellement retiré du flux normal vis-à-vis de son bloc conteneur.

Mais bon, ce n'est pas très grave. Je retiens la solution.

[NoSmoking]

Bonjour,

Dans un flux normal, et en absence de directives CSS particulières, les éléments successifs rencontrés dans le code HTML se placent les uns après les autres horizontalement puis verticalement, passage à la ligne, suivant leur modèle de boite (bloc, inline...) comme lorsque l'on écrit du texte de gauche à droite et de haut en bas.
Les éléments se placent le plus à gauche et en haut que possible.
Les éléments de type en ligne se placent à la queue leu leu, tant qu'il y a de la place sur la ligne, alors que les éléments de type bloc force un passage à la ligne avant eux et après eux.
Une autre caractéristique est que ces éléments influent directement sur les dimensions de leur conteneur, leur parent direct.
Le positionnement de chaque élément est donc dépendant de l'élément le précédant et influe sur l'élément suivant.

Un élément flottant, outre le fait qu'il n'occupe que la place nécessaire à son contenu, en absence de propriétés CSS définies, se place le plus à gauche ou à droite de son conteneur suivant qu'il est déclaré float:left ou float:right, tout en restant sur sa ligne initiale et n'influe pas sur les dimensions de son conteneur.
Il quitte le flux normal mais partiellement seulement car il conserve une influence sur les éléments qui le suivent contrairement aux éléments en position:absolute par exemple.
Les éléments qui le suivent vont donc ce placer le plus à gauche et en haut possible en tenant compte de l'espace occupé par le "flottant".

Voilà pour faire light !

Toutes les informations sur Visual formatting model

[Invité]

Quel puits de science, ce NoSmoking !