Shihabiiuc Logo Shihabiiuc
Video Content

Two-column layout HTML CSS

In this post, you’ll see how to create a two-column layout in HTML CSS. Also, you’ll learn how to make this layout mobile responsive. That means the layout will automatically break into one column on small screens.


I will give you all the source code for this column layout & the link to my GitHub repository. Before you start, let’s see the live template that we’re going to build in this post.

Live Preview



In this post, I will show you three different ways to create a two-column layout. Use any of the approaches that you like the most.

Using CSS Flexbox

Two col layout