CSS Two-Column Layout

Demo starter files

Multi-column layouts are extremely common in web design, and there are a couple of different ways to tackle them.

In this demo we'll create a basic two column layout using the three current, widely supported methods. We'll use the same HTML for all three methods, create a separate style sheet for each one.

Here are the main methods for creating multi-column layouts and other side by side content:

  1. HTML Tables
  2. Float
  3. Inline-Block
  4. CSS Tables
  5. Flex Box

HTML Tables

HTML tables are intended for displaying tabular data (a.k.a. tables).

HTML tables are created using a handful of HTML elements we won't formally talk about. If you need to build a table, they're not hard to figure out... <table>, <tr> for a row of table cells, <td> for table data (table cells), and a few others.

Before we had better methods, web developers used HTML tables for overall page layouts too. This practice is long in the past and I only mention it in case you come across old or very misguided directions on the web, instructing you to use them.

Floats

Floats are a very common technique because they're relatively simple and have the most predictable results.

The only major drawbacks to floats are:

  • The need for a clearfix.
  • It's difficult (though possible) to make the heights of all the columns the same.

Inline-Blocks

Another relatively easy technique is to pretend all of your columns are sitting on one really tall line of text. You set all the columns to display: inline-block.

It's easy and it works, but it's not as commonly used, because there are a couple of "gotchas" that can be a nuisance to work with.

  • Once the elements are turned into giant letters, the white space in the source code between them isn't totally ignored.
  • Width and size settings can be a pain to configure unless you adjust the box-sizing.

Workarounds for the white space issue are complicated, and the only easy way to fully prevent problems is to format your HTML in a non-standard way.

CSS Tables

Instead of using the HTML table elements, you use divs or other HTML elements, and change their display properties to behave like tables. The most important distinction here is that the types of HTML tags you use make more sense for their content.

The trickiest part of getting CSS tables to work right is setting the column widths.

The overall width of the table is more important than the widths of each column. If your column widths don't add up properly, they're converted to ratios of the total table's width. Also sometimes that's not what happens either. More info in the resources below... CSS tables are just weird.

Flex Box

Flex box is a newer layout method that now has good browser support. It is arguably the best suited for a wide variety of screen sizes, and it lets you rearrange the display order of your content without changing the order of the HTML.

The flex box layout model comes with a lot of complexity, so we'll cover it in a separate demo. Flex box changes the way the traditional CSS box model works in a few very fundamental ways, which makes it difficult for beginners (and frankly many experienced front end developers as well).

As we work through creating a two column layout in this demo, keep in mind it doesn't have to apply to an entire page. The demo creates columns for large containers of content, but you can use these same methods for creating side by side content within any container, large or small.