You'll have to use `position: fixed` to take it out of the document flow, otherwise using `width:100%` will always refer to it taking up 100% of the width of it's parent container.

Add the class `fullWidth` and style like this:



    .fullWidth {
        position: fixed;
        left: 0;
        right: 0;
    }

### [Here's a Demo in jsFiddle][fiddle]

[fiddle]: http://jsfiddle.net/KyleMit/V3e3g/

I have angular app that is using Bootstrap 3 and Angular UI for layout control.

I want to have a particular element fit to the full width of the browser. This element lives  inside a bootstrap grid (col-xx), which is itself inside an angular directive, which is placed inside another bootstrap grid, which is inside a Angular UI tab, which is inside another grid. I think you get the idea.

What is the correct CSS to get my element to be the full browser width ? The width of the parent of the element is only a fraction of the screen width, but I need this particular div to override everything because I need maximum real estate (trying to show a gantt chart).

The effect I am trying for is similar to the current google image search feature when you click on a particular image and the bar expand across the full screen. 

Apologies if the question is a bit unclear. I may need to add some code.