ページの半分+ 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> 

DEMO：http://jsfiddle.net/sparkup/jL10axxv/

Answer 2

基本的なアウトライン：、両方とも同じleft位置それらを与える緑の1に何でも固定幅を与えますあなたは欲しいと青の1つを与えるright: 0。