半页+ 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/

Answer 2

基本轮廓:给他们两个相同的left位置，给绿色的任何固定宽度你想要的，给蓝色的right: 0