hkgamw
Last Updated: November 14, 2018
·
94.88K
· praveenvijayan

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

7 Responses
Add your response

21199

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' ?

8 months ago ·
30233

MAN! I just created an account to comment on this. I struggled for hours with this and this solution is super elegant!
It's specially helpful for wordpress sites for example, when you need to override the container in the post/product page.

THANKS!!

4 months ago ·
31238

I will definitely use your information. Thank you.

3 days ago ·