Structuring a website using columns made with CSS and HTML is now the standard and tables have been left behind to perform this function.

Content hide
1 Method 1. Using a flexible container flex.
1.1 Example 1. Same width columns:
1.2 Example 2. Different width columns. Content plus a sidebar.
2 Method 2. Using flotation float.
3 Method 3. Using Bootstrap.

Method 1. Using a flexible container flex.

Using a flex container is a modern and well-supported CSS method, so it is the recommended one.

Roughly speaking, the flex property is given to a container and a row behavior is indicated; to each “child” or column a certain width is given that will make them behave as such. An example will make everything clearer.

Example 1. Same width columns:

The HTML structure would be as follows:

<div id="container">
  <div>
    <p>First column content.</p>
  </div>
  <div>
    <p>Second column content.</p>
  </div>
</div>

And the respective CSS is as follows:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#container > div {
  width: 50%;
}

In this example, if the children/columns are 50% wide, it makes them divide the space in two, so two columns are generated. If we wanted 3 columns, it would be as simple as changing the width to 33%, if we wanted 4 columns to 25%, and so on.

Example 2. Different width columns. Content plus a sidebar.

A very common use of columns is to create the structure of a blog, typically a sidebar and a column with the main content.

Let’s suppose that we want the content to occupy 75% of the available width and the sidebar to take 25%, the HTML code would be:

<div id="container">
  <div id="main">
    <p>Main content.</p>
  </div>
  <div id="sidebar">
    <p>Sidebar content.</p>
  </div>
</div>

And the respective CSS is as follows:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#main {
  width: 75%;
}
#sidebar {
  width: 25%;
}

In addition, flex containers have many properties, such as modifying the order in which columns are displayed and other useful behaviors. It is certainly a good investment of time to learn more about the properties of flex containers.

Method 2. Using flotation float.

To create columns we can start with the HTML structure and then add CSS styles:


<div id="container" class="clearfix">

<div id="sidebar">
<p>Left sidebar content</p>
</div>

<div id="main">
<p>Main content</p>
</div>

</div>

As you may have noticed, there are 3 HTML tags that will serve as containers:

  • Container – Determines the total working space.
  • Sidebar – Sidebar width and location.
  • Main – Content width.

The properties they must have are:


#container {
 text-align: left;
 width: 100%;
 margin: auto;
}

#sidebar {
 width: 20%;  /* This will be the width of your sidebar column */
 background-color: #CCCCCC;  /* Here set the background color you want for this sidebar */
 float:right; /* Here you establish which side you want this "column" to be on. */
}

#main {
 width: 75%;
 float: left;
 background-color: #FFFFFF;
 border:#000000 1px solid; /* We put a border to make a separation */
}
/* To clean the floats */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Method 3. Using Bootstrap.

Bootstrap is one of the most popular and widely used CSS frameworks for responsive web design. In its version 5, it offers a simple and fast way to create two columns on your website without writing a lot of custom CSS code.

To use the Bootstrap 5 grid system, you must create a parent container. This container allows you to align and center the content on your page properly. Add a <div> with the container class inside the <body> element of your HTML file:

<body>
  <div class="container">
    <!-- Your grid system goes here -->
  </div>
</body>

Inside the main container, create a <div> element with the row class to define a row. Then, inside this row, create two <div> elements with the col-6 classes to define two columns of equal width (the number 6 indicates that each column will occupy half of the total width, since Bootstrap uses a 12-column system):

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- Contents of column 1 -->
    </div>
    <div class="col-6">
      <!-- Contents of column 2 -->
    </div>
  </div>
</div>

Now you can add the content you want in each column. For example, you can add text, images or any other HTML element.