Bonsoir à tous,

voilà je vais essayer de vous expliquer mon problème parce que je me prends la tête sur cette petite broutille depuis le début d'après midi et je crois bien que je vais finir par pêter un câble !

En faites je cherche à ce qu'un block s'étende automatiquement en fonction de la taille des blocks qui se trouvent dedans. Mon block principal est le block "contain", celui ci s'étend bien, par contre le block juste en dessous, nommé "bloc", lui ne s'étend pas du tout sous Chrome et Safari.

Sous IE et Firefox le block s'étend bien. Et j'ai beau tourner les choses dans tous les sens, impossible d'étendre ce second block. Il reste avec une taille minuscule. J'ai essayé de définir le height dans tous les sens, en %, auto...

J'utilise pourtant la technique du <br /> extend. Bref je ne comprends plus rien. Pouvez vous me donner votre avis.

Par avance merci de votre aide.

Voici mon code de manière simplifié.

HTML :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
(...)
<body>
     <div id="contain">
          <div id="bloc">
               <br class="br_extend" />
          </div>
     </div>
</body>
(...)
CSS :

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
23
24
25
26
27
 
html,body{
    height:100%;
}
 
#contain{
    display:block;
    float:none;
    clear:both;
    margin: 10px auto;
    width: 1000px;
    background-color:red;
}
 
#bloc{    
    display:block;
    float:none;
    clear:both;
    margin:0;
    width:1000px;
    background-color:purple;
}
 
.br_extend{
    float:none;
    clear:both;
}