HTML 3 Column Layout: A Comprehensive And Easy How-To Guide

• Author
• Recent Posts

Melvin NolanI started writing code around 20 years ago, and throughout the years, I have gained a lot of expertise from hands-on experience as well as learning from others. This website has also grown with me and is now something that I am proud of. Latest posts by Melvin Nolan (see all)

• What Flag Can Be Used in Linux with the Passwd Command to Force Password Change: A Guide - November 12, 2025
• How to Easily Pull Up QR Code on Outlook - November 12, 2025
• How to Update Linux on Chromebook: A Step-by-Step Guide - November 12, 2025

Creating an HTML 3 column layout includes dividing content and elements into sections that make sense, and it’s a process that can be done using two different methods.

The HTML three columns layout can be extremely useful when you are working on a project that requires dividing the content.

In this article, we are going to be exploring the two methods to create 3 columns in HTML documents step by step, and by using adequate examples. Keep reading the article, and by the time you are done, you are going to be ready to include the 3 columns HTML code in your next project.

JUMP TO TOPIC

• How To Make 3 Columns in HTML
• Using the HTML <div> Element
  • – Adding CSS Properties to Your HTML 3 Column Layout
  • – Making Three Unequal Columns Using CSS Properties
  • – Creating a Responsive Column Layout
• Using the CSS Multi-Column Layout Method
  • – Using the Column-count Property
  • – Using the Column-Gap Property
  • – Using the Column-Rule-Style Property
  • – Using the Column-rule-Width Property
  • – Using the Column-rule-Color Property
  • – Using the Column-rule Property
• Final Thoughts

How To Make 3 Columns in HTML

As we said before, creating a 3 column website allows you to divide the elements and content into logical sections. For example, it is useful to use them when you are writing a food recipe, dividing animals into groups, or writing a how-to guide that requires three different steps.

If you want to add columns in HTML documents, there are two basic methods you can use, all according to your personal preference. The two methods we are talking about are:

• Using the HTML <div> element
• Using CSS multi-column layout

When using the first method, it is also worth noting that including the HTML <div> element is not going to be enough. You are supposed to include certain CSS properties to change and style your columns. The second method also requires the usage of the div CSS property, however, instead of adding three different elements, you are only using the column-count attribute, and adding the number of columns.

In the following part of this article, we are going to explain and exemplify each method individually.

Using the HTML <div> Element

To create a 3 column HTML template, first, you are going to create one main <div> element that is going to include the other three. In the main <div> element, you are supposed to include a class with the attribute “row”, which is going to tell your browser to take up the entire space for this row on the web page. Now, you are ready to divide this row into columns by including three <div> elements containing the class with a “column” attribute.

Let us take a look at the following example in action.

<div class=”row”> <div class=”column”> This is where you include the content in the first column. </div> <div class=”column”> This is where you include the content in the second column. </div> <div class=”column”> This is where you include the content in the third column. </div> </div>

Adding the type of content inside the columns is totally up to you. By using such a code, you have successfully created a simple, yet correct three-column layout syntax for your web page. From now on, you are supposed to add certain CSS properties, as we are going to show you in the next step.

– Adding CSS Properties to Your HTML 3 Column Layout

Even though it is possible to create columns using only HTML elements, it is highly recommended to include some basic CSS properties. They help you style the columns, and there are so many different options you can choose from. We are going to show you an example where we have equally divided the columns and each of them is going to take up one-third of the row.

Please observe the following example:

.column { float: left; width: 33.33%; } /* The floats after the columns are cleared */ .row:after { content: “”; display: table; clear: both; }

By simply including several basic CSS properties, you have assigned certain values to the three HTML <div> elements. However, this is not the end because there are other things you can change in your properties to make different columns.

– Making Three Unequal Columns Using CSS Properties

Columns do not always have to be equal. There are times when you want to create columns of different sizes, and this can be easily achieved using certain CSS properties. This is usually done when the columns have different importance, or they contain different amounts of content. The process is simple and requires only one attribute for each class.

Take a look at the following short example.

.column { float: left; } .right, .left { width: 25%; } .middle { width: 50%; }

This is one of the easiest ways you can create unequal columns. Of course, the values can be changed according to your needs but this example only shows how simple it is to create them. We are going to take a look at one more way where you can create a 3 column responsive layout.

– Creating a Responsive Column Layout

The reason why this type of column is very important is that people use screens of different sizes when viewing the web page. Some screens are smaller, some are bigger, and you are supposed to create an HTML document that is going to satisfy the needs of everyone. This is why creating a responsive 3 column layout is essential. It takes only a little bit of effort but it is well worth it.

The following example is going to show us how easy it is to create it.

/* This is what we call “responsive layout” – in the cases that the screen is less than 750px wide, put the three columns on top of each other and stacking them up, instead of putting them next to each other */ @media screen and (max-width: 750px) { .column { width: 100%; } }

As explained in the example, if the width of your screen is less than 750px, the columns are going to be displayed one over the other. This is useful when people use mobile phones to open a web page. It is going to be much easier for these users to navigate on the web page.

Using the CSS Multi-Column Layout Method

The second method of creating columns we are going to discuss in this article is using the various CSS properties. The best way to style any content in your HTML document is done by CSS. The options are endless, and you have plenty of benefits. We are going to take a look at the various attributes you can use to create such a 3-column layout.

– Using the Column-count Property

This is the first, and most important, attribute you are going to need. This attribute allows you to set the number of columns you would like to divide your element into.

Let us take a look at a short example.

div { column-count: 3; }

As you can see, the syntax is very easy to remember. Simply create a <div> element inside your HTML document, and by using this syntax, you are going to divide the content into three columns.

– Using the Column-Gap Property

Simply dividing the content into three columns is not enough. There are other ways you can style the content, and the most common one is using the column-gap property. This allows you to change the default value of space between the columns.

The following example is going to show us how easy it is to use this property:

div { column-gap: 20px; }

Again, create a CSS div element and include this attribute inside. Set the value of the gap according to your needs and preferences.

– Using the Column-Rule-Style Property

It is always highly recommended to tell your browser how to display the rule between the columns. The easiest way to do this is by using the column-rule-style property.

Please observe the following example:

div { column-rule-style: solid; }

Including this CSS property in your HTML document will result in the creation of a solid line around each column. It is a great way to visually see that the columns are separated by a line.

– Using the Column-rule-Width Property

If you create such a line, it is a great idea to show what the width is. This is where you use the column-rule-width attribute, which sets the width according to your input.

The following example shows a 5px rule width.

div { column-rule-width: 5px; }

Because the attribute is so simple, always make sure to include it whenever you use the column-rule-style attribute.

– Using the Column-rule-Color Property

You can change one more thing of the column rule, and that is the color. For this function, you are going to use the column-rule-color attribute, and simply write the color you want to use.

Let us take a look at the following example.

div { column-rule-color: orange; }

Based on the syntax we used in this example, the color of your column rule is going to be orange. There is one more attribute you should know about.

– Using the Column-rule Property

If you feel like the previous three steps are way too complicated, there is a way to make things easier. The best way to substitute all the column rules we mentioned before, is to simply use the column-rule attribute. This allows you to include the type, size, and color at once.

Take a closer look at the following example.

div { column-rule: 5px solid orange; }

As you can see, all the previous attributes are merged into one. Simply include a single space between the words and you are going to have the correct syntax. This might save you some time and effort.

Final Thoughts

Creating an HTML 3 column layout is a very useful function, as it allows you to separate the content into three different columns, and there are two methods you can use to do this. Let’s take a look at what we discussed in this article:

• The HTML 3 column layout allows you to group certain content
• The first method uses the HTML <div> element
• The second method uses the CSS multi-column layout
• There are different CSS attributes you can include for your <div> elements
• You can create a responsive 3-column layout using JavaScript
• Creating and styling a column layout using CSS properties is easy

After carefully reading this guide, you are ready to start implementing this function into your next HTML project. Never be afraid to experiment with the elements and attributes, and even if things do not go as planned, do not give up and come back to our guide.

Rate this post

Related posts:

1. HTML Link Element – Exploring Two Different Linking Methods
2. HTML Entities: When and How To Use Them To Add Characters Within Codes
3. HTML Font Tag – Customizing Your Font Was Never Easier
4. HTML Var: Capture Data Effectively for Quicker Programming
5. HTML Em: Inform Your Reader of the Website’s Main Objective
6. HTML Superscript: Present Numeric Web Content Uniquely
7. HTML Table Font Size: Changing the Default Properties Is Easy
8. HTML Remove Underline From Link: Learn the Complete Process
9. HTML I Tag: Differentiate Your Web Page Text Strategically
10. HTML Input Tag: Boost Your Website’s Data Collection Capability
11. The HTML Relative Link: Learn More on Linking Documents
12. Markdown Image: Boosting Web Content With Visual Elegance