make div fill the rest of the browser viewport

Question

so i have a normal 960px layout, i want to add a div that can use 300px inside that 960 and the rest of the space (browser width) i want to fill with that div...but always stay on the same position inside the wrapper (im not talking about a vertical fixed element)

can i do this without using javascript? but if theres isnt another option its ok

Example:

<div class="wrapper">
    <div class="fill">Something</div>
</div>

CSS:

.wrapper {
    margin: 0 auto;
    width: 960px;
    background: #ddd;
}
.fill {
    margin: 300px 0 0 0;
    width: 300px;
    background: red;    
}

thank you

Answer 1

If I well understood what you need: try this fiddle

http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/ (source)

this should be the effect, but I placed an extra wrapper around your wrapper. The width of red box inside the dark container is always of 300px no matter what the size of the viewport is.

Answer 2

You can use margin-left:-10%; and margin-right:-10%; If i understood correctly.

or you can

.wrapper {
    margin: 0 auto;
    width: 960px;
    background: #ddd;
    position:relative;
}
.fill {
    margin: 300px 0 0 0;
    width: 300px;
    background: red;    
    position:absolute;
    top:0px;
    left:-10%;
}