Problème extension block sous Safari & Chrome [Résolu]

Sanceray3 · 04/04/2011, 20h41

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;
}

NoSmoking · 04/04/2011, 22h01

Bonsoir,
pas sur d'avoir bien compris le besoin, largeur ou hauteur, essaies de la mettre à 100%

Code :

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

1
2
3
4
5
6
7
8
#bloc{    
    display:block;
    float:none;
    clear:both;
    margin:0;
    width : 100%; /*1000px;*/
    background-color:purple;
}

Sanceray3 · 05/04/2011, 09h27

Merci pour ta réponse.

En faites mon problème était qu'un de mes blocks ne voulait pas s'étendre sous safari et chrome. j'ai finalement réussi par trouver la solution pour que ce dernier le devienne. Il suffisait de rajouter la propriété "overflow:hidden" à mon block secondaire nommé "bloc", comme ci dessous :

Code :

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

1
2
3
4
5
6
7
8
9
 
#bloc{    
    display:block;
    float:none;
    clear:both;
    margin:0;
    width:1000px;
    overflow:hidden;
}

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email