半页+ CSS对齐

Question

我不知道如何解释,但绘制了我需要的CSS对齐图片.模板具有固定宽度,绿色区域表示主要内容,蓝色分区提供该页面的标题.

绿色div有以下css:

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

这适用于绿色框,但我不知道如何制作蓝色部分.这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>

演示:http://jsfiddle.net/sparkup/jL10axxv/