La mitad de la página + alineación de CSS

Question

No sabía cómo explicar pero dibujar una imagen de la alineación de CSS que necesito. La plantilla tiene un ancho fijo y el área verde representa el contenido principal y la división azul proporciona el título para esa página.

El verde div tiene el siguiente CSS:

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

Esto funciona muy bien para la caja verde, pero no sé cómo hacer que la sección azul. Ese div necesita cubrir el lado derecho de la página + todo el ancho del área verde como se puede ver en la imagen a continuación.

Tenga en cuenta que el usuario puede cambiar el tamaño de la ventana para que no se pueda reparar el ancho del bit azul.

¿Cómo puedo lograr esto usando CSS puro?

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

Answer 1

Al igual que la imagen!

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/

Answer 2

El esquema básico: les dará a ambos la misma left posición, dan el verde lo ancho fijo quieres, y dale al azul right: 0.