Make a div stretch left to infinity

Question

I am looking to have <h2> tags stretch the background to the left of the browser window but don't seem to be able to. Can anyone help?

Jsfiddle here: jsfiddle.net/4fm8x/20

The wrapper div is needed for centring the page on larger resolution screens. I would like to keep this centred if possible.

Answer 1

as soon as your div is inside a smaller parent, it will be hard to stretch it to browser-borders. what should work is using the full space and then center each item (except h2). You would need an extra span inside the h2 to hold the actual content.

The minified version:

<div id="wrapper">
    <h2><span>This is a header/title</span></h2>
    <p>This is the text.</p>
</div>

and

p {
    width:500px;
    margin:0 auto;
}

h2 {
    width:50%;
    overflow: hidden;
    background: #FF8C00;
}

h2 span {
    width: 250px;
    float: right;
}

or in your style: http://jsfiddle.net/YW2ce/