28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sortir une div de son cadre

Bonjour,

upload/28211-test.png

Est-ce possible de "faire sortir" la div #red de #site, afin qu'elle prenne toute la largeur de la fenêtre du navigateur, et non plus les 960px de base?

Tout en sachant que la div #vert et #bleu sont extensible en hauteur.


<body>
    <div id="site">
        <div id="vert">...</div>

        <div id="rouge">...</div>

        <div id="bleu">...</div>
    </div>
</body>




body {background: orange;}

#site {width: 960px; margin: auto; background: gray;}

#vert {background: green; min-height: 120px;}

#rouge {background: red; height: 50px;}

#bleu {background: blue; min-height: 120px;}


Merci d'avance
Modifié par Blogger (21 Nov 2011 - 10:34)

*{margin: 0; padding: 0;} /* On retire les marges des blocs qu'affiche par défault les navigateurs */
body {background: orange; width: 100%;}
#site {width: 960px; margin: auto; background: gray;}
	#vert {background: green; min-height: 120px;}
	#bleu { margin-top: 50px; background: blue; min-height: 120px;} /* On génère une marge à partir du haut égale à la hauteur du bloc rouge */

#rouge {position: absolute; top: 120px; left: 0; width: 100%; background: red; height: 50px;} /* On sorts le bloc rouge du flux et on lui attribut une valeur de 120px à partir du haut pour le placer correctement, ainsi qu'un width: 100% pour qu'il prenne toute la largeur de la page */



<body>
    <div id="site">
        <div id="vert">...</div>
        <div id="bleu">...</div>
    </div>
	<div id="rouge">...</div>
</body>
Ok, je vois que je suis obligé de mettre ma div #red en dehors de #site, c'est ce que je voulais savoir, merci pour la réponse.

Problème résolu Smiley smile
Sujet clos
Aller à