Alternance entre éléments à largeur fixe et largeur écran 100%

**dev14** · 06/03/2014, 12h14

Bonjour,

je viens prendre des conseils, et trouver la meilleure solution sur une problématique que j'ai souvent sur les tablettes en mode portrait (pas paysage)

je souhaite avoir ceci en schéma :

- Container à 1008px

- Eléments qui prennent 100% de la taille de l'écran (tablette portrait/paysage, pc, ...)

Les éléments qui dépassent du div sont de simples background aux couleurs différentes, parfois images ou encore motifs, etc...

Une des problématique étant que mon élément div du milieu par exemple est contenu dans mon container et donc, je n'arrive pas à le faire déborder sur les 100% de l'écran de façon naturelle tout en étant contenu dans le container à largeur restreinte.

Code :

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

1
2
#container{width:1008px;margin:0 auto}
#footer,#menu,#content{width100%}

Au départ j'avais essayé de ne pas faire de container principal, et j'avais mis une classe pour éléments à 100% et et une classe pour éléments à 1008px et j'alternais mes éléments : Sur PC et tablette paysage ça marchait, sur tablette portrait, j'avais des décalages et des soucis.

Par rapport à l'image faites sur paint, auriez-vous une idée pour reproduire cette architecture de site avec un container largeur fixe et des éléments à 100% de largeur?

Merci

**NoSmoking** · 06/03/2014, 18h51

Bonjour,
au passage : #footer,#menu,#content{width100%}, manque le : entre width et 100%.

Change d'approche et ne t'obstine pas avec un container unique, alterne.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="full_largeur">
    MENU
</div>
<div class="container">
</div>
<div class="full_largeur">
    MIDDLE
</div>
<div class="container">
</div>
<div class="full_largeur">
    FOOTER
</div>

plus la structure reste simple plus elle s'adapte facilement.