Half the page + CSS alignment

Question

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 + the 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

Answer 1

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/