Soucis de hauteur de divs

Par Mousse, il y a 13 ans

Les bases HTML/CSS

Bonjour à tous,

Je confectionne en ce moment un petit site durant mon stage et j'ai du mal à comprendre le comportement d'un certain div...

Le site est centré grâce à un div global qui englobe tous les autres avec margin:0 auto 0 auto.
Comme le contenu du site est variable, je lui ai donné une largeur mais pas de hauteur fixe.

Jusque là tout va bien mais ma tutrice à voulu que je rajoute une ombre portée autour de ce div global, et ça, sans les propriétés CSS3 car les clients sont sur des vieilles version de IE.
J'ai donc rajouté un div qui englobe le div global, d'une largeur un peu plus grande que le div global et j'ai mis en background un png d'ombre portée qui se répète en Y.

Le soucis est que cette ombre portée ne se propage pas en Y, ou du moins que sur le div header qui à une hauteur fixe dans le css.
Après plusieurs tests, j'ai remarque que le div global réagissait de la même manière: c'est à dire qu'il s'agrandit seulement jusqu'au div header. Le reste des div sort du div global.

Avez vous une idée de comment faire pour que le div global (et le div ombre) prennent la hauteur entiere de la page?

HTML

<body>
    <div id="ombre">
        <div id="global">
            <div id="header">
                <a href="index.php" id="logo"><img src="images/logo.png" alt="" /></a>
            </div>
            <div id="corps">
                .......contenu.....
            </div>
            <div id="footer">
                ...contenu...
            </div>
        </div>
    </div>
</body>

CSS 

body{ background:#E7E6E2;}
/*OMBRE ENGLOBE GLOBAL ET GLOBAL ENGLOBE TOUT LE SITE */
#ombre{margin:0 auto 0 auto; width:1153px; background:url(../images/ombre.jpg) top left repeat-y; }
#global{margin:0 auto 0 auto; width:1130px; height:100%; }
/* BANNIERE ET LOGO */
#header{width:1130px; height:127px; border-bottom:1px #006400 solid; background:url(../images/header_bg.jpg);}
#logo{margin:0 0 0 60px;}

/* CORPS ENGLOBE LE MENU LE CONTENU ET LE FOOTER */
#corps{width:1130px; height:100%; float:left; background:url(../images/menu_bg.jpg) repeat-y, url(../images/bg_cadrier.png) top left;}

/* FOOTER */
#footer{width:1130px; height:53px; float:left;border-top:1px #006400 solid; background:url(../images/footer_bg.jpg);}

Aperçut avec l'ombre qui buggue

En vous remerciant!

6 réponses

Mousse, il y a 13 ans

Bon, j'ai passé une journée entière à chercher ce bug et aujourd'hui en une heure, et après avoir posté un message, je réussi à débugguer...

En enlevant tous les float:left, cela fonctionne. Par contre je ne comprends pas trop pourquoi...

Quelqu'un pourrait m'expliquer?

PS:je passerai le post en "résolu" quand quelqu'un pourra me dire la réponse...

Mousse, il y a 13 ans

Ah ok ok! Comme quoi le web est petit!

coloo, il y a 13 ans

Peut-être as-tu tout simplement oublier de rétablir le flux de tes blocs (propriété clear).

Tu es pas en src à castres ? (3d guy ?)

Typhon, il y a 13 ans

Lorsque que l'on positionne des blocs en float left ou right, ils sont considérés comme en positionnement absolu, c'est à dire qu'ils ne tiennent pas compte des autres éléments du conteneur parent pour se positionner, et vice versa, c'est à dire que ton conteneur parent ne va pas tenir compte de ces éléments pour déterminer sa propre hauteur, et va faire comme si ils n'existaient pas. (D'où la taille null de ton div parent).

Mais dans ton cas les float left qui tu as mis ne semble servir à rien, car il permettent uniquement de position plusieurs éléments de type bloc côte à côte, hors tu veux que ton "corp" et ton "footer" soient l'un en dessous de l'autre et pas côte à côte.
Donc tu peux effectivement retirer les propriétés float.

Mais dans le cas ou tu en aurais besoin par la suite, place après le <div id="footer"></div> mais à l'intérieur du <div id="gloabal"></div>

un <div class="clear"></div> qui tu stylisera en css de cette manière

HTML :

<div id="global">
    ...
    <div id="footer>
        ...
    <div>
    <div class="clear"></div>
</div>

CSS : 

.clear {
    clear: both;
}

Cette propriété clear, permet de préciser à l'élément parent de tenir compte de tes éléments en float, et va donc prendre une taille qui les englobes.

Mousse, il y a 13 ans

Coloo: Si je suis bien en SRC à Castres en 2e année. Et toi?

Typhon: Merci pour cette explication, ça me parrait beaucoup plus clair. Effectivement mes float ne servaient à rien, c'était juste une sécurité si j'avais mal proportionné le site et que sur un écran très large, il se déforme complètement.

coloo, il y a 13 ans

Ben je suis en cispm alternance ^^. me semblait bien que je t avais déja vu ;)