hkgamw
Last Updated: March 20, 2018
·
62.65K
· praveenvijayan
3ddd45a484a3895124de1623cb948ce2

Creating full width (100% ) container inside fixed width container.

Some times we need to add a full width containers (which spans 100% of window) inside a container which has a fixed width and aligned center.

Following code helps to achieve the layout.

Demo: http://jsfiddle.net/m1L6pfwm/2/

HTML

 <div class="container" style="width: 750px; margin: 0 auto;">

<div class="row-full">
     --- Full width container ---
</div>

</div>

CSS

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

How it works:

Css units vw (viewport width) is used here. IE9 above has support for vw & vh css units.

Picture

Say Thanks
Respond

5 Responses
Add your response

21199
Cult

Saved my life! Thank you man!

over 1 year ago ·
27823

Thanks man!!!

over 1 year ago ·
28685

If you don't want the horizontal scrollbar and you don't mind voodoo, try this:

.row-full {
width: 99.225vw;
position: relative;
margin-left: -49.59vw;
left: 50%;
}

over 1 year ago ·
28771

It is a beautiful solution, but it is not responsive. :(
Any suggestions for responsivity?

over 1 year ago ·
29759

In your picture above. Did you mean for the green lines to be 'vw' not 'vh' ?

about 2 months ago ·