Moderne Templates spielen gerne mit Bildern oder andersfarbigen Hintergründen über die komplette Bildschirmbreite. Der Textbereich bleibt dabei aber auf 960 oder 1150 Pixel beschränkt.
Normalerweise kann man im Template einfach das Container-Div schließen und mit einem neuen Abschnitt in voller Breite beginnen. Was aber wenn man mitten in einem Artikel einen Block oder ein Bild in voller Breite braucht? Z.B. um einen Absatz hervorzuheben oder ein Panorama über die komplette Breite einzubauen.
Es liegt nahe das Problem mit "position: absolute;" zu erschlagen. Aber absolut positionierte Elemente folgen nicht dem HTML - Seitenaufbau so dass sie einfach über dem nächsten relativ positionierten Element liegen würden. Auch ein ":before" Pseudoelement funktioniert nicht, da sich die Höhe von Abschnitten bei fließenden Layouts ändern kann.
Abhilfe schafft die CSS3 Maßeinheit vw (view-width) die die Breite des Bildschirms in Prozent bestimmt. View-width wird von allen modernen Browsern bis zum IE9 unterstützt. Der Trick ist so genial wie einfach. Ein relativ positioniertes Blockelement wird mit einem negativen Margin von 50% versehen und dann mit 100% Bildschirmbreite versehen.
.fullwidth { margin-top: 15px; margin-bottom: 15px; position: relative; width: 99.225vw; margin-left: -49.59vw; left: 50%; }
Warum diese krummen Margin Werte? Nun, der Firefox liefert als Viewport-Breite den Bildschirm inklusive vertikaler Scollbar. Dadurch würde das HTML breiter als der Bildschirm und leicht vertikal verschiebbar.
Ergänzung
Die Breitenangabe 99.225 ist nur ein Kompromiss. Firefox berechnet die Scrollbar mit genau 10 Pixeln. Eleganter ist es die calc Funktion moderner Browser zu verwenden.
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
Demo
Zum besseren Verständnis habe habe ich ein Demo auf JSFisddle erstellt.