CSS में दो-कॉलम वेबसाइट लेआउट योजना

आइए निम्नलिखित प्रकार का दो-कॉलम लेआउट बनाएं:

सबसे पहले पेज की मूल संरचना बनाते हैं:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

अब wrapper को स्टाइल करते हैं, इसे स्क्रीन के केंद्र में संरेखित करते हुए:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

अब हेडर और फुटर को स्टाइल करते हैं:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

जैसा कि आप देख रहे हैं, हम हेडर और फुटर को ऊंचाई दे रहे हैं। हम ऐसा इसलिए कर रहे हैं क्योंकि हमारी योजना में उनमें कोई सामग्री नहीं है। सामग्री होने पर ब्लॉकों को ऊंचाई नहीं देनी चाहिए - यह उनकी सामग्री से बनेगी।

इस बात पर भी ध्यान दें कि हम उन्हें चौड़ाई नहीं दे रहे हैं। तथ्य यह है कि हेडर और फुटर ब्लॉक तत्व हैं और उनकी चौड़ाई स्वचालित रूप से wrapper की चौड़ाई के बराबर होगी।

आइए अब उन्हें padding दें, ताकि टेक्स्ट सीमाओं से चिपके नहीं:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

हालाँकि, padding की उपस्थिति ब्लॉकों के आकार पर बुरा प्रभाव डालेगी - वे निर्दिष्ट की तुलना में बड़े हो जाएंगे। आइए सभी ब्लॉकों का व्यवहार इस तरह बदलें कि padding और बॉर्डर हमारे ब्लॉकों का विस्तार न करें:

* {
	box-sizing: border-box;
}

अब हमें कंटेंट और साइडबार को एक पंक्ति में रखना है। आइए इसे फ्लेक्स का उपयोग करके करें:

#container {
	display: flex;
}

कंटेंट और साइडबार की चौड़ाई निर्दिष्ट करें। इस मामले में, उनकी चौड़ाई का योग wrapper की चौड़ाई के बराबर होना चाहिए:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

मान लीजिए कि हम साइडबार और कंटेंट के बीच एक इंडेंट बनाना चाहते हैं। इस मामले में, साइडबार को margin सेट करने की आवशश्यकता है। इसके साथ ही, हमें इस margin के लिए चौड़ाई को किसी से कम करना होगा। आइए कंटेंट से कम करें, तदनुसार उसकी चौड़ाई कम करते हुए:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

आइए अब ऊंचाई जोड़ें, क्योंकि हमारे तत्वों में कोई सामग्री नहीं है। केवल एक तत्व में ऊंचाई जोड़ना पर्याप्त है, क्योंकि दूसरा फ्लेक्स तत्व ऊंचाई के अनुसार समायोजित हो जाएगा (क्यों?)। आइए कंटेंट को ऊंचाई दें:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

आइए कंटेंट और साइडबार में शेष स्टाइल जोड़ें:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

बस, हमारा लेआउट तैयार है। आइए सारे कोड को एक साथ इकट्ठा करें:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}