절반 페이지 + CSS 맞춤

Question

설명하는 방법을 알지 못했지만 필요한 CSS 정렬 그림을 그렸습니다. 템플릿의 너비는 고정되어 있고 녹색 영역은 기본 콘텐츠를 나타내고 파란색 구분은 해당 페이지의 제목을 제공합니다.

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

이 녹색 상자 잘 작동하지만 난 파란색 섹션을 만드는 방법을 알고하지 않습니다

녹색 div는 다음과 같은 CSS를 가지고있다. 그 그림은 아래 그림에서 볼 수 있듯이 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.