Bonjour à tous,

Je vois souvent des layout basé sur ce modèle

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="leftNavigation">Navigation</div>
</div>
Toutefois, ce modèle présente un problème majeur lorsque le div "Content" contient une table plus large que le viewport.

Dans ce cas-là, le content s'étire et une scrollbar apparait en bas de l'écran pour défiler horizontalement. À moins qu'il y ait un "overflow :hidden", mais je ne veut pas cacher le contenu de ma table.

Donc si j'ai bien compris, pour corriger ce problème. Il me faudrait un modèle dans ce genre ?

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
<div id="container">
  <div id="header">Header
      <div id="wrapper">
          <div id="content">Content</div>
      </div>
      <div id="leftNavigation">Navigation</div>
  </div>
</div>
Et si mon header doit avoir une hauteur de 100 pixel, alors je dois définir son padding à 100 pixels et une marge (width et height) de 0 px. Ensuite y placer mon image de background.

Dites-moi si je suis sur la bonne piste. Ou si vous voyez un autre problème ?

Merci