Σχέδιο Διπλής Στήλης Διάταξης Ιστότοπου σε 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 και το footer:

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

Όπως βλέπετε, ορίζουμε στο header και στο footer ύψος. Το κάνουμε αυτό, καθώς στο σχέδιό μας δεν περιέχουν περιεχόμενο. Εάν υπήρχε περιεχόμενο δεν θα έπρεπε να ορίσουμε ύψος στα μπλοκ - θα σχηματιζόταν από το περιεχόμενό τους.

Παρατηρήστε επίσης ότι δεν ορίζουμε πλάτος. Το γεγονός είναι ότι το header και το footer - είναι στοιχεία μπλοκ και το πλάτος τους θα είναι αυτόματα ίσο με το πλάτος του 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;
}

Τώρα πρέπει να τοποθετήσουμε το περιεχόμενο και την πλαϊνή γραμμή στη σειρά. Ας το κάνουμε αυτό χρησιμοποιώντας flex:

#container {
	display: flex;
}

Ας ορίσουμε στο περιεχόμενο και στην πλαϊνή γραμμή το πλάτος τους. Σε αυτήν την περίπτωση, το άθροισμα των πλάτους τους πρέπει να είναι ίσο με το πλάτος του wrapper:

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

Ας πούμε ότι θέλουμε να κάνουμε ένα κενό μεταξύ της πλαϊνής γραμμής και του περιεχομένου. Σε αυτήν την περίπτωση, στην πλαϊνή γραμμή χρειάζεται να οριστεί margin. Σε αυτήν την περίπτωση, θα πρέπει να αφαιρέσουμε πλάτος για αυτό το margin από κάπου. Ας το αφαιρέσουμε από το περιεχόμενο, μειώνοντας ανάλογα το πλάτος του:

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

Ας προσθέσουμε τώρα ύψος, αφού τα στοιχεία μας δεν περιέχουν περιεχόμενο. Αρκεί να προσθέσουμε ύψος μόνο σε ένα στοιχείο, αφού το δεύτερο στοιχείο flex θα προσαρμόσει το ύψος του (γιατί;). Ας ορίσουμε ύψος στο περιεχόμενο:

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