How To Create a Responsive Two Column Layout in HTML and CSS
As a web developer, you have a variety of layout you can use to present content on a website.
You can use a two column layout to display:
- Related content for example a list of features, pricing cards, testimonials.
- Additional content for example sidebar with newsletter, related posts, author’s bio.
- Two separate products or services from one creator for example a photography who is also a designer can choose to create a single website with both services on it.
A two column layout is commonly used on screen wider than smartphone screen that is tablet, desktop and wide screen. With responsive design, the two columns are reorganized into one column on smartphone screens.
Using a two columns layout, you can split and structure the content into related sections.
Content in the same section with the same background appear to be relate.
Content in same section but different background appear to be contrasted with each other.
This helps the reader to navigate your website smoothly.
How to divide a div into two columns in HTML and CSS
1. Two equal columns Layout HTML CSS
a. Using CSS Float
Add the HTML code:
<div class="columns">
<div class="column">
/// Column 1: Put any relevant content here ///
</div>
<div class="column">
/// Column 2: Put any relevant content here ///
</div>
</div>
Add the CSS code:
.columns {
Width: 100%;
}
.column {
width:100%;
}
@media (min-width: 48em) {
.column {
width: 50%;
float:left;
}
.columns {
content: "";
display: table;
clear: both;
}
}
b. Using Flexbox
<div class="columns">
<div class="column">
/// Column 1: Put any relevant content here ///
</div>
<div class="column">
/// Column 2: Put any relevant content here ///
</div>
</div>
.columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
flex: 50%;
}
c. 2 equal columns layout Using CSS Grid
<div class="columns">
<div class="column">
/// Column 1: Put any relevant content here ///
</div>
<div class="column">
/// Column 2: Put any relevant content here ///
</div>
</div>
.columns {
display: grid;
grid-template-columns: 50% 50%;
}
d. Two Column Layout Using Bootstrap
Add Bootstrap links in your <head> </head> section:
Add your HTML code:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
e. Two Equal Columns Using Bulma
Add Bulma link in your <head> </head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
Then add the following HTML code within your <body> </body> tags.
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
</div>
2. Create Sidebar Layout: Two column layout
a. Create sidebar layout CSS
Add the HTML code:
<div class="columns">
<div class="column column-1">
/// Column 1: Put any relevant content here ///
</div>
<div class="column column-2">
/// Column 2: Put any relevant content here ///
</div>
</div>
Add the CSS code:
.columns {
Width: 100%;
}
.column-1, .column-2 {
width:100%;
}
@media (min-width: 48em) {
.column-1 {
width: 70%;
float:left;
}
.column-2 {
width: 30%;
float:left;
}
.columns {
content:"";
display: table;
clear: both;
}
}
b. Create Sidebar Layout with Flexbox
<div class="columns">
<div class="column">
/// Column 1: Put any relevant content here ///
</div>
<div class="column">
/// Column 2: Put any relevant content here ///
</div>
</div>
.columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
flex: 50%;
}
