Half the page + CSS alignment

I didn't know how to explain but draw a picture of the CSS align that I need. The template has a fixed width and the green area represents the main content and blue division provides the title for that page.

The green div has the following css:

#content {
  width: 980px;
  margin: 0 auto;
} 

This works great for the green box but I don't know how to make the blue section. That div needs to cover the right side of the page + t开发者_运维百科he entire width of the green area as you can see from the picture below.

Bear in mind that user can resize the window so the width of the blue bit cannot be fixed!

How can I achieve this using pure CSS?

http://img15.imageshack.us/img15/3884/cssalign.png

Just like the picture !

Css :

#title{
   position:relative;
   width:50%;
   margin:50px 0 50px 50%;
   background:blue;
   padding:25px 245px;
   left:-490px;
}
#content{
     width:980px;
     height:600px; /* for it to work with no content */
     margin:0 auto;
     background:green;
}

Html :

<div id="title"></div>
<div id="content"></div>

DEMO : http://jsfiddle.net/sparkup/jL10axxv/

The basic outline: Give them both the same left position, give the green one whatever fixed width you want, and give the blue one right: 0.