Problème largeur div

Bonjour,

Après quelques recherches sur internet (et ce forum) sans résultat, je poste donc mon problème.

Je réalise un site, et j'ai une div header qui occupe toute la largeur de l'écran, et qui a une hauteur de 40px.
Je lui ai donc assigné un left à 0, un rugit à 0, et un height à 40px.
Jusque ici, tout fonctionne parfaitement.

En dessous de cette div, j'ai une div "contenu" qui fait 960px de large, et qui est centrée horizontalement, avec des marin-left/right en auto, ainsi qu'un width à 960px.
jusque ici, aucun problème ...

Or lorsque j'arrive sur le site, avec une fenêtre de navigateur inférieure à 960px, j'obtiens logiquement un ascenseur horizontal. En utilisant cet ascenseur, je peux donc faire défiler ma div contenu ainsi que celle header. Or le fond de la div header s'arrête à la largeur de l'écran ... En scrollant horizontalement, je perds la couleur de fond de ma div header ...

Savez vous comment corriger cela ?

Bonne fin de week end
Fabien

Bonjour,

Tout d'abord, sur ton div header, inutile de spécifié les valeurs left ou right ou position.

Un élément bloc prendra par défaut toute la largeur disponible à l'écran.

Cependant, lorsque tu rapetisse ton écran, évidemment dans ce cas header se limite à la largeur réel de l'écran; et donc n'est pas présent en dehors de la zone disponible (lors d'un scroll horizontal)

Le plus simple à ce moment, serait de donner à ton div header une valeur de min-width équivalente à ton contenu.

Exemple:

#header {
    min-width: 960px;
}

Cela dit, si tu te préoccupe réellement des utilisateurs avec des écrans plus petits que 960px, peut-être devrais-tu envisager de créer un responsive design avec les % et les media-queries.

Je plussoie le message de Vaxilart.

Le système de grilles de mise en page 960.gs applique carrément la propriété min-width que tu cites sur le body.

Ca a pour effet d'éviter tous les problèmes liés au background au scroll horizontal lorsque la fenêtre n'est pas assez large.

Effectivement, le min-width était la bonne solution !
Je cherchais plus compliqué ...

Merci beaucoup à vous !