Set div width equal to window size
With a fixed width: 1300px;
, you can not have a responsive to the window size
div
As codehorse said, add
.container {
width: 100%;
}
but add
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
to you css as width: 100%;
will render correctly if the dimension of the parent elements have been set beforehand!!
working demo
change container to
.container {
width: 100%;
}
If you have the div width in px
format it wont be responsive.
It has to be in %
format. If you put the inner content as width:100%
The inner content will have a width of the '.container'.
So in order to get the inner div to be the window width you should have the .container
to be equal to the window width.
CSS:
.container{
width:100%;
}
Or if you want we can use jQuery:
var w = $(window).width();
$('.content').css('width', w);
It looks like you want to open your content
div as a modal window, hiding rest of the body elements. Try this JSBIN DEMO
.content {
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
}