CSS Layout

What it is

Let’s review the CSS properties we’ve learned and see how to use them to lay out a typical webpage.

Why it matters

You’ll find that just because you understand CSS properties like display and position doesn’t mean you can always get CSS to do what you want it to.

What you'll learn

CSS is flexible, and there’s many ways to accomplish any task. In this lesson, we’ll see several different methods to lay out a typical page with a header, footer, sidebar, and content window. We’ll preview responsive design and flexbox, and learn why CSS layout is often tricker than it seems.

How to learn it

HTML and CSS are flexible tools. Look at all these cool things people build with it.

However, most webpages all seem to follow the same general format. They have a header with a logo in the top left, a footer, and between one a and a few columns of content in between. Often, it is a single main content window with a sidebar.

Designers make their sites this way simply because it is what people expect. Following the conventions established by other sites is one of the most important ways to make it easy for people to use your site. For example, how would you get to the Developer Atlas landing page right now?

As this MDN guide explains, different types of layouts work better for different types of screens, like a phone, tablet or desktop.

Ever since mobile devices started becoming the main way people access the internet, designing a site to work for both mobile and computers hasn’t been optional. Writing your CSS so that your site works for both is called responsive design.

But we’re getting ahead of ourselves. How can we use the CSS rules we’ve learned to achieve standard layouts?

Let’s review CSS layout

Can you use CSS to make a fixed footer? A fixed width sidebar? A flexible sidebar? A series of tiles?

This guide gives you a sneak preview of flexbox and CSS frameworks like twitter Bootstrap. Many beginners jump straight to using these frameworks because they make CSS a bit easier to deal with, but it is important to understand the underlying CSS first or bootstrap will frustrate you in the long run.

Sticky footers

Everything probably seems pretty straightforward so far, but you’ll quickly discover that layout in CSS can be quite painful. For example, one of the most common layout problems you’ll face is to create a sticky footer.

Take a look at this example page. Looks fine, right? But what will happen if my blog post was shorter? Delete the Lorem Ipsum text. Notice how the footer is now all the way up by the header?

That isn’t what we want! A footer should be at the bottom of the page by default, but using a position: fixed footer covers up the content and gets in the way. We don’t want that either.

Ideally, the footer will sit at the bottom of an empty page, and render below the content on a page with a scrollbar. This is called a sticky footer.

Can you implement it in the codepen example? Try to reason through it and/or use google and search for a solution. Pretty hairy all of a sudden, right? Often, implementing even simple behaviors with float, display and position can be difficult and require using extra divs or tricks like negative margins.

It used to be worse.

Not too long ago, the only way to make CSS layouts was to hack something together with HTML tables. To make it worse, browsers all rendered things slightly differently, leading to tangled nightmares of compatibility issues.

Fortunately, browsers have converged quite a bit in the last few years. IE finally plays nice, and modern CSS3 rules like flexbox are supported in most browsers.

With the internet, the only constant is change. Table-based layouts are ancient history, float-based layouts are aging, flexbox is the state of the art, and CSS Grid layouts are on their way.

Flexbox has eased a lot of the migranes of years past. A standard fluid layout with two fixed sidebars used to be so difficult to achieve that it was called ’the holy grail layout’. With flexbox this becomes trivial. We’ve put off learning it until now because it is important to understand all of CSS, but it’ll be the topic of the next lesson.

Comprehension

• Why is it important to follow web conventions?
• What is responsive design?
• What are media queries?
• What does display: inline-block do? Why is it easier to work with than a float-based layout?
• What is a sticky footer?
• What is browser compatibility?
• What is CSS flexbox?
• What is CSS grid?
• What is the 'holy grail' layout?

Tasks

Take a look at your sticky footer pen (or my example page). Notice how there's a small strip of white around the outside of the header? The gray should go all the way to the edge. Do you remember why? How do you get rid of it?

One of the trickiest things to do in CSS is something that sounds like it should be completely trivial. Can you figure out how to center the text in this div vertically and horizontally?

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.