CSS वेबसाइट लेआउट
5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
आप जिस भी वेबसाइट पर जाते हैं, उसका ढाँचा एक जैसा होता है: ऊपर site के नाम वाला header, links वाला navigation bar, बीच में main content का हिस्सा, अक्सर बगल में sidebar, और नीचे contact details और copyright वाला footer। एक बार यह ढाँचा बनाना आ जाए, तो आप लगभग कोई भी पेज बना सकते हैं — blog, स्कूल की साइट, दुकान, या खबरों का पेज।
HTML में हर हिस्से के लिए खास tags हैं: <header>, <nav>, <main>, sidebar के लिए <aside>, और <footer>। CSS फिर तय करता है कि हर हिस्सा कितना चौड़ा हो, कहाँ बैठे, और किस रंग का हो। लेआउट खुद बस boxes हैं — एक के ऊपर एक रखे हुए और बगल-बगल सजाए हुए।
दो कॉलम वाला लेआउट
सबसे आम लेआउट दो कॉलम का है: लेख के लिए चौड़ा main कॉलम और अतिरिक्त links या खबरों के लिए सँकरा sidebar। इसका आसान आधुनिक तरीका है दोनों को एक container में रखकर display: flex देना। Main कॉलम को flex: 3 और sidebar को flex: 1 मिलता है — ये संख्याएँ बस उपलब्ध जगह के हिस्से हैं, इसलिए main तीन चौथाई और sidebar एक चौथाई जगह लेता है।
Syntax — header, कॉलम, footer
header {
background-color: #04aa6d;
color: white;
padding: 20px;
text-align: center;
}
.container { display: flex; }
main { flex: 3; padding: 20px; }
aside { flex: 1; padding: 20px; background-color: #f1f1f1; }
footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
Header और footer पूरी चौड़ाई में फैलते हैं, क्योंकि वे flex container के बाहर हैं। सिर्फ container के अंदर के दो कॉलम बगल-बगल बैठते हैं।
पूरे पेज को बीच में लाना
चौड़े monitor पर पूरी screen में फैला text पढ़ना मुश्किल होता है। ज़्यादातर साइटें पेज की चौड़ाई max-width: 1000px से सीमित करती हैं और margin: auto से उसे बीच में ले आती हैं। पेज फिर दोनों तरफ खाली जगह के साथ बीच में बैठता है, जैसे मेज़ पर रखी किताब।
width की बजाय max-width इस्तेमाल करें। max-width से पेज छोटे phone की screen पर भी सिकुड़ सकता है; fixed width से वह बाहर निकल जाएगा और बगल में scroll करना पड़ेगा।लेआउट के अंदर image gallery
Gallery छोटे boxes की पंक्ति होती है, हर box में एक तस्वीर और उसके नीचे caption। वही flex वाला तरीका यहाँ भी काम करता है: display: flex वाला container, बीच में gap, और हर gallery box को एक जैसा flex: 1। अंदर की तस्वीरों को width: 100% चाहिए, ताकि वे अपने box को बिना बाहर निकले भर लें।
box-sizing: border-box जोड़ें। इससे padding चौड़ाई के अंदर गिना जाता है, इसलिए 25% पर set किया गया कॉलम 20px padding के साथ भी 25% ही रहता है — चौड़ा होकर पंक्ति नहीं तोड़ता।आम गलतियाँ
box-sizing: border-boxभूल जाना — padding वाले कॉलम तय से चौड़े हो जाते हैं और आखिरी कॉलम अगली लाइन में गिर जाता है।- पेज के wrapper के लिए fixed
widthइस्तेमाल करना — पेज phone पर सिकुड़ने की बजाय बाहर निकल जाता है। - Header या footer को flex container के अंदर रखना — वे पूरी चौड़ाई में फैलने की बजाय कॉलम में सिकुड़ जाते हैं।
- Gallery की तस्वीरों पर
width: 100%भूल जाना — बड़ी तस्वीर अपने box से बाहर निकलकर लेआउट तोड़ देती है। - हर चीज़ के लिए
<div>इस्तेमाल करना — semantic tags<header>,<main>,<aside>और<footer>पेज को पढ़ने में आसान और search engine के लिए बेहतर बनाते हैं।
याद रखें
- पेज के पाँच हिस्से होते हैं: header, nav, main, sidebar (
<aside>) और footer। - दो कॉलम वाला लेआउट एक flex container है, जिसमें main को
flex: 3और sidebar कोflex: 1मिलता है। - पेज को
max-widthऔरmargin: autoसे बीच में लाएँ। - Gallery के boxes भी flex items ही हैं, और उनकी तस्वीरें
width: 100%पर होती हैं। box-sizing: border-boxpadding को आपकी तय की हुई चौड़ाई के अंदर रखता है।
याद रखने की तरकीब: HTML = ढाँचा, CSS = सजावट, JavaScript = हरकत — और पेज का लेआउट इन तीनों का मिलन है।
उदाहरण समझिए
header— ऊपर की तरफ स्कूल के नाम वाली हरी पट्टी, बीच में सफेद text और 20px padding।.container { display: flex; }— main कॉलम और sidebar के चारों ओर wrapper, जो उन्हें एक ही पंक्ति में बगल-बगल रखता है।main { flex: 3; }औरaside { flex: 1; }— लेख चौड़ाई के तीन हिस्से लेता है और sidebar एक हिस्सा, इसलिए बँटवारा लगभग 75% और 25% का है।.gallery { display: flex; gap: 15px; }— तीनों gallery boxes बराबर gap के साथ पंक्ति में बैठते हैं; हर grey.photobox असली photo की जगह है, जो अपने box को भरने के लिएwidth: 100%इस्तेमाल करेगी।footer— नीचे की तरफ गहरी पट्टी, flex container के बाहर, इसलिए वह पेज की पूरी चौड़ाई में फैलती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>School Website Layout</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; }
header { background-color: #04aa6d; color: white; padding: 20px; text-align: center; }
nav { background-color: #333; padding: 12px; text-align: center; }
nav a { color: white; text-decoration: none; margin: 0 15px; }
.container { display: flex; max-width: 1000px; margin: auto; }
main { flex: 3; padding: 20px; }
aside { flex: 1; padding: 20px; background-color: #f1f1f1; }
.gallery { display: flex; gap: 15px; }
.gallery div { flex: 1; border: 1px solid #ccc; padding: 10px; text-align: center; }
.gallery .photo { height: 120px; background-color: #ddd; }
footer { background-color: #333; color: white; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header>
<h1>KAMALDNP Academy</h1>
<p>IT Training and Summer Training, Varanasi</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Results</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<main>
<h2>Welcome to Our Campus</h2>
<p>We teach HTML, CSS, Python, and Java to students from all over Uttar Pradesh. Our summer training batches start every June.</p>
<h3>Our Gallery</h3>
<div class="gallery">
<div><div class="photo"></div><p>Classroom</p></div>
<div><div class="photo"></div><p>Computer Lab</p></div>
<div><div class="photo"></div><p>Library</p></div>
</div>
</main>
<aside>
<h3>Latest News</h3>
<p>Admissions open for the July batch.</p>
<p>New CSS course starts Monday.</p>
<h3>Quick Links</h3>
<p>Syllabus</p>
<p>Results</p>
<p>Fees</p>
</aside>
</div>
<footer>
<p>Contact: support@kamaldnp.com | Varanasi, UP</p>
</footer>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 30 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
