Pb positionnement dans un div

**vica6a** · 20/02/2007, 16h04

Salut à tous,
voila j'ai un problème sur la mise en page d'un nouveau site, je souhaite créer des des blocs à l'intérieur d'un block.
A voir ici

Voici le code utilisé :

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
.actu_center { 
    width: 600px; 
    text-align: center; 
    margin-bottom: 10px;
    border-left: 1px #d9dada solid; 
    border-right: 1px #d9dada solid; 
    border-bottom: 1px #d9dada solid;
} 
.case { 
    width: 150px; 
    height: 150px; 
    margin: 7px; 
    text-align: center;
    border: 1px #b2b1b1 solid; 
    background-color: #e9e9e9; 
    float: left; 
}

Code html :

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

1
2
3
4
5
 
<div class="actu_center"> 
    <div class="case"> 
    </div> 
</div>

Si je ne mets pas le float: left sur .case, les blocks sont les uns en dessous des autres...
On constate que les blocks .case ne sont pas à l'intérieur de actu_center lorsque je mets float: left.

Merci pour votre aide

**MasterOfChakhaL** · 20/02/2007, 16h19

salut,

Le comportement est normal.
Quand un élément est en float, alors, il est sorti du flux normal de la page. La conséquence est que le bloc parent ne les prends plus en compte pour déterminer ses dimensions (d'où le débordement).

Soit tu ajoutes a la suite de tes éléments floattants (dans le même block parent), un élément avec la propriété clear:both, Soit tu évites les float.

Un élément avec clear reste dans le flux mais se place sous les éléments flottants, donc ca force le bloc parent à s'adapter.

Si tu ne veux mettre que des images dans ton bloc, alors tu n'as pas forcément besoin de div. Si tu mets directement img (qui est un element inline par défaut, alors, tes images se placeront comme du texte => retour a la ligne quand il n'y a plus de place.

Si tu as forcément besoin des blocs, alors essaye display: inline-block, sur tes cases.

Le but de tout ce que je raconte, est d'éviter si possible l'utlilisation des float car ils ne sont pas bien pris en charge sous IE.

**vica6a** · 20/02/2007, 16h48

Et bien tout d'abord, merci beaucoup pour la rapidité de ton message.

Ton message et ta facilité me consterne car je vois que j'ai encore énormément de travail avant d'arriver a un vrai petit niveau ^^ (ca faisait deux jours que j'étais sur ce problème...).
Biensur, ta solution marche, j'ai ajouté un div en clear: both et le tour est joué

.

Encore merci pour ton aide