Page Layout Techniques in CSS

Page Layout Techniques in CSS

Arguably one of the most difficult things to wrap your head around in CSS is how to properly layout elements on the page. In this lesson, we're going to break it down, and give concrete examples and techniques to help you overcome what gets many people stumped!

Two-column Page Layout

Let's say you wanted a two-column page, which tends to be pretty common. You can use floats for this.

Say this is your markup:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>2 Columns</title>
		</head>
		<body>
			<h1>2 Columns</h1>
			<div>
			 	<h2>First Column</h2>
			 	<p>Has ea forensibus definiebas, vis iudicabit voluptatum ad. Amet praesent sea et. Minim petentium reprehendunt id per.</p>
			</div>
			<div>
			 	<h2>Second Column</h2>
			 	<p>Te habeo eripuit cum, vix ei quot noluisse maiestatis, ea solet eruditi percipit quo. Dicant iisque vel ei, ius id imperdiet inciderint accommodare.</p>
			</div>
		</body>
	</html>
	
2 columns before applying float.
2 columns before applying float.

To get the two columns we want, we need to float one column to the left, and the other to the right, and then give them each a width of approximately half.

	
	div:nth-of-type(1) {
		width: 49%;
		float: left;
	}
	div:nth-of-type(2) {
		width: 49%;
		float: right;
	}
	

When you apply these styles, you get this:

2 columns after applying float.
2 columns after applying float.

Creating a sidebar for navigation is also a pretty popular thing you see in websites. After all, why not? They're convenient and always right next to your content.

Let's tackle this using position this time.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Sidebar Navigation</title>
			<style>
				body, h1 {
					margin: 0;
				}
				.navigation {
					position: absolute;
					left: 0;
					width: 10rem;
					height: 100%;
					background-color: lightgray;
					text-align: center;
				}
				.navigation ul {
					padding: 0;
					list-style-type: none;
				}
				.navigation li {
					padding: 1rem;
				}
				.content {
					padding-top: 1rem;
					margin-left: 12rem;
				}
			</style>
		</head>
		<body>
			<nav class="navigation">
				<span>Logo Here</span>
				<ul>
					<li>Link #1</li>
					<li>Link #2</li>
					<li>Link #3</li>
				</ul>
			</nav>
			<div class="content">
				<h1>Content Title</h1>
				<div>
					<h2>First Paragraph</h2>
					<p>Has ea forensibus definiebas, vis iudicabit voluptatum ad. Amet praesent sea et. Minim petentium reprehendunt id per.</p>
				</div>
				<div>
					<h2>Second Paragraph</h2>
					<p>Te habeo eripuit cum, vix ei quot noluisse maiestatis, ea solet eruditi percipit quo. Dicant iisque vel ei, ius id imperdiet inciderint accommodare.</p>
				</div>
			</div>
		</body>
	</html>
	
An example of sidebar navigation layout.
An example of sidebar navigation layout.

It looks like a lot at first, but let's break down what's happening here.

Our navigation element is being positioned absolute with a left value of 0. This makes our navigation links stay on the left side of the page. Also important to note that it was given a width of 10 rem.

Then, our content is given a margin-left of 12 rem. This makes it so that all the content is rendered to the right of navigation.

Flexbox Layout

Alternatively, you can accomplish a pretty similar layout to the one above by instead using flex to layout the page:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Flexbox Layout</title>
			<style>
				body {
					margin: 0;
					min-height: 100vh;
					background: #ccc;
					display: flex;
					flex-direction: column;
				}
				.header, .footer {
					height: 3rem;
					background: #777;
					color: white;
				}
				.content {
					display: flex;
					flex: 1;
					background: #999;
					color: #000;
				}
				.main {
					flex: 1;
					background: #eee;
				}
				.sidebar {
					width: 10rem;
					background: #ccc;
				}
			</style>
		</head>
		<body>
			<header class="header">Header</header>
			<section class="content">
				<aside class="sidebar">Sidebar</aside>
				<main class="main">Main Content</main>
			</section>
			<footer class="footer">Footer</footer>
		</body>
	</html>
	
An example of using flex for layout.
An example of using flex for layout.

In this example, we make the page stretch vertically to take up the entire screen thanks to min-height: 100vh. Then, we stretch content and main so that the main content gets the remaining space that sidebar isn't using. By putting the header before and the footer after the content, the rest of the page renders just how we want it to!

With page layout techniques under your belt, up next is at-rules and all the fun that comes with those!