आधा पृष्ठ + सीएसएस संरेखण

Question

मुझे नहीं पता था कि कैसे समझाया जाए लेकिन सीएसएस संरेखण की एक तस्वीर खींचना जो मुझे चाहिए। टेम्पलेट में एक निश्चित चौड़ाई है और हरा क्षेत्र मुख्य सामग्री का प्रतिनिधित्व करता है और ब्लू डिवीजन उस पृष्ठ के लिए शीर्षक प्रदान करता है।

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

यह हरे बॉक्स के लिए अच्छा काम करता है, लेकिन मैं कैसे नीले खंड बनाने के लिए पता नहीं है:

हरी div निम्नलिखित सीएसएस है। div को पृष्ठ के दाहिने तरफ + हरी क्षेत्र की पूरी चौड़ाई को कवर करने की आवश्यकता है जैसा कि आप नीचे दी गई तस्वीर से देख सकते हैं।

ध्यान रखें कि उपयोगकर्ता विंडो का आकार बदल सकता है ताकि नीली बिट की चौड़ाई तय नहीं की जा सके!

शुद्ध सीएसएस का उपयोग करके मैं इस को कैसे प्राप्त कर सकता हूं?

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; 
} 

एचटीएमएल:

<div id="title"></div> 
<div id="content"></div> 

डेमो: http://jsfiddle.net/sparkup/jL10axxv/

Answer 2

बुनियादी रूपरेखा: उन दोनों को एक ही left स्थिति, हरी एक दें दे जो कुछ भी निश्चित चौड़ाई आप चाहते हैं, और नीले रंग को right: 0 दें।