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)