problème imbrication de div (et de css)

Nihonium

Membre expert
Club iGen
27 Juillet 2008
2 328
530
Salut à tous amis webdesigners,

Je bosse sur un nouveau site. D'habitude j'arrive à régler les soucis d'affichage mais cette fois ci je me tape plutôt la tête contre les murs!

Alors je vais essayer d'etre le plus clair possible et de vous montrer un peu le layout que j'ai adopté. A savoir que j'ai tout fait from scratch à la main en CSS et html.

Voilà le layout :

Voir la pièce jointe 36021

Dans mon code l'imbrication donne ça :

Bloc de code:
<html>
<head></head> 
<body id="body" style="" > 
         <div style="" class="barregauche" ></div>
         <div style="" class="barredroite" ></div>  

<div style="" id="header" >         
    mon titre de site
</div> <!-- Header -->  

<div id="content" >
         mon contenu au milieu ...
</div>    <!-- content -->  

<div id="footer" >
         mon copyright
</div> <!--footer-->
</body>
</html>
Le problème est le suivant : la div "content" au milieu est placée juste sous le header de 300px de haut. Du coup il y a un décalage de 300px au bas du contenu, donc l'image de la barre gauche et droite s'arrête non pas au niveau du footer, mais en plein milieu, là où le contenu est censé s'arreter.

Je ne sais pas comment régler ça dans mon CSS pour que le contenu soit adapté à la hauteur du body.

Un peu d'aide ?

[ à ceux qui veulent voir en vrai avec FireBug ou l'inspecteur d'éléments de Safari je peux donner l'adresse du site en MP, ça serait plus clair ... ]


Merci d'avance.
 
la structure de ton code me semble mauvaise (colonnes gauche et droite avant le header).


Oui, en fait ces 2 colonnes sont censées rester collées sur les bords de la fenetre mais sans "empiéter" sur le reste du design.
Celles ci ne posent pas de problème: elles sont, en gros, en fond et collées au body.

C'est vraiment le contenu qui dépasse en bas de 300px, en gros de la hauteur du header. Sauf que je ne peux pas mettre de marge de 300px sur ce contenu sinon ça fout la zone dans le reste!

je la retente pour la tronche du layout :

Voir la pièce jointe 36041

ça c'est ce à quoi ça devrait ressembler !
 
J'ai réussi à régler le souci. Et dire qu'il suffisait de rajouter un float:left; à mon header et de modifier le placement des autres éléments en fonction... je vois pas comment je suis passé à coté d'un truc aussi débile !

anty : je te l'envoie quand même si t'as envie de jeter un zoeil :zen: