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

row fluid explain

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

0938.54.84.99