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