Половина страницы + выравнивание CSS

Question

Я не знал, как объяснить, но нарисовал картинку CSS-выравнивания, которая мне нужна.Шаблон имеет фиксированную ширину, а зеленая область представляет основное содержимое, а синее разделение обеспечивает заголовок для этой страницы.

Зеленый div имеет следующий код:

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

Thisотлично работает для зеленой коробки, но я не знаю, как сделать синий раздел.Это div должно покрывать правую сторону страницы + всю ширину зеленой области, как вы можете видеть на картинке ниже.

Имейте в виду, что пользователь может изменить размер окна, чтобыШирина синего бита не может быть исправлена!

Как этого добиться с использованием чистого CSS ?

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

Answer 1

Как на картинке!

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

Основная схема: дайте им обоим одинаковую позицию left, присвойте зеленому любую фиксированную ширину, какую хотите, а синюю right: 0.