How to make width 100% of browser in a div?

Question

I basically have a contents div which is set to a width of 1000. In my contents div, I also have a footer div. WHen i set the footer div to width:100%, then the footer width will be as large as the contents div. How do I make my footer scale to 100% of my browser window if it is already in a div?

Answer 1

Better move footer out from container.

But if you really need this, there is work, but fragile solution:

.parent{
    position: static;
}

All parents to element with 100% width must be static. And this can break something else, because position: relative is often useful.

.closest_el_width_100_percent_width{
    position: relative;
}

And footer itself:

footer:{
    position: absolute;
    left: 0;
    right: 0
}

Add, paddings, margins, salt and pepper by you taste.

Fiddle: http://jsfiddle.net/9rjskuon/

Answer 2

You can always use "vw" instead of % ( http://www.w3schools.com/cssref/css_units.asp )
so at the end you can use

.footer{
    width: 100vw;
}

and then position it wherewer you need, but you shouldnt need this for footer. firstly you should place your footer out of your wrapper.