What Are HTML Columns, And How Do You Use Them?

Like the columns of the Greek Parthenon, which support one of the most remarkable monuments in the world, HTML columns support some of the more unique websites. The only difference between the two is that one is digital and the other is not.

This post will teach you what HTML columns are and how they work. You will also discover code examples of different ways to create column layouts for HTML websites. Furthermore, you will see some videos elaborating on the concepts discussed in this post to help bolster what you’ve learned.

Without further ado, let's get this party started.

How to Create Columns in HTML

There is more than one way to create HTML columns; despite how it sounds, you need a combination of HTML and CSS. For a long time, the only way to create columns was to manually declare them by setting the CSS styles for the page with static sizes for items. This approach worked, but it only simulated the visual appearance of columns.

Since then, CSS has grown, and building columned layouts has become much more accessible and has much more support than it used to. Moreover, there are many ways to create column layouts for web pages. In today's CSS — at the time of writing this, it's CSS3 — you can create column layouts with tables and grids, and CSS even provides a column property.

In the next section, we will discuss how you can create a simple two-column layout using widths and margins with basic CSS.

HTML Two Columns

Creating a simple two-column layout in HTML is straightforward and truthfully only requires a width and margin set for a single CSS selector. Let's look at the code needed to set up the HTML for this basic column layout example.

This code is basic and only creates a two-element column-based layout, but it doesn’t work without the CSS needed to set its styles. Let’s look at the basic CSS code needed to style this HTML into a two-column layout.

With just the three lines of CSS above, the page becomes a two-column layout you can use as you see fit. Moreover, this design will resize as needed to maintain its size and structure according to the user's display. Now that you understand how simple this is let's look at other ways to do this that better supports scalability.

HTML Code for Columns

Over the years, CSS has been subject to a lot of growth and development, and it has improved the tools it offers for styling web pages more simply and cleanly. These changes provide more than just flexibility. They also offer improved simplicity and support the accepted practice of DRY code. Some ways to create columns are frowned upon in the current state of CSS. At a time, developers commonly used CSS tables to create columns; this has since fallen out of practice.

Instead, there are now ways to create columns explicitly. Let's look at that next.

In CSS3, you can target an element and directly set its column property. This process works great if you want to take a body of text and split it into columns for readability.

This code doesn’t work well if you want to organize multiple HTML elements into columns; you will need a different approach. In CSS3, there is a clean and effective way to handle the process of creating columns in HTML.

Let's look at the CSS code needed to create a simple set of two evenly sized columns using the HTML above.

This code creates a simple and flexible two-column layout within the body element; however, it does not consider multiple rows. In the case of multiple rows of columns, you will need some extra HTML to create a parent container for the columns. Adding a new parent element to serve as the row for each set of columns means you can have multiple rows and varying column sizes in each row.

Let’s look at the HTML you will need to create this effect.

This HTML consists of two additional sections to serve as row containers. The first row is a two-column layout, while the second is a three-column layout. Due to these changes, you will also need additional CSS, creating a new class name for each set of column sizes.

Changing the class name from column to column-2 and column-3 makes it easy to set the sizes of each column. Let's look at the CSS needed to create this layout.

This code creates a nice two-row, multi-column layout; there are other ways to create column layouts for your web pages, each with pros and cons. One example is the CSS grid layout which offers immense power, control, and flexibility when creating web page layouts. Below is a video that explains how to use CSS grid to create unique designs.

Moving Forward With HTML Column Layouts

The best thing you can do to move forward with columns in your HTML web pages is to study the many different ways to make columns. There are many ways, and even some CSS preprocessors have column layouts built into their code.

Furthermore, you can do more with columns, such as combining them with media queries to create responsive pages. You can create pages on which the size and number of columns can change based on the screen size of the device viewing the page. There is a lot to learn, and the best way to do it is to practice the different methods and find the way you prefer.