<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
इस लेआउट के बारे में कुछ बातें:
- मैं केवल प्रदर्शन के लिये ऊंचाई और पृष्ठभूमि निर्दिष्ट।
- ओवरफ्लो ऑटो फ्लोट को साफ़ करने के लिए युक्त तत्व पर है; हालांकि आप एक स्पष्ट div का भी उपयोग कर सकते हैं।
- कंटेनर में द्रव चौड़ाई है, लेकिन 960 पर अधिकतम हो गई है। मैं इस नंबर को मनमाने ढंग से चुनता हूं, लेकिन टेक्स्ट की रेखाएं बहुत लंबी होने से पहले तरल चौड़ाई को अधिकतम करना एक अच्छा विचार है।
- यदि आप कंटेनर तरल पदार्थ रखते हैं, तो लेआउट ब्रेक होगा यदि व्यूपोर्ट पर्याप्त छोटा हो। संपादित करें: मैंने कंटेनर में 400px की न्यूनतम चौड़ाई जोड़ा, इससे समस्या को ठीक करनी चाहिए।
इसके अतिरिक्त, मैं http://www.alistapart.com/articles/holygrail/ पर एक नज़र डालेगा। यद्यपि यह एक फिक्स्ड-तरल-निश्चित तीन कॉलम लेआउट का विवरण देने वाला एक लेख है, लेकिन मुझे लगता है कि वहां कुछ विचार हैं जिन्हें आप मेरे लेआउट पर सुधारने के लिए उपयोग कर सकते हैं, यदि आप इतने इच्छुक थे।
यह इस बात पर निर्भर हो सकता है कि आपको ब्राउज़र-अनुकूल कैसे होना चाहिए। –
आईई, फ़ायरफ़ॉक्स, वेबकिट और ओपेरा के नवीनतम संस्करण। – NVI