How to create columns like a pro: creating columns in plain HTML & CSS.

Avic Ndugu
Dec 4, 2018 · 2 min read

Once you have played with HTML usual course of action is learning CSS to style your markup. Learning to create a 2 or more columns is an important skill. We are going to create columns in plain HTML & CSS in 3 easy steps.

The HTML

We will kick off by inserting the HTML markup in the index.html file.

<div class=”row”>
<div class=”column”>
<p>This is the first column that should be very along
compared to other which are relatively short. This
is the first column that should be very along compared
to other which are relatively short.</p>
</div>
<div class=”column”>
<p>This is the second column that should be abit short
compared to other which are relatively long.</p>
</div>
</div>
<div class=”row”>
<div class=”column”>
<p>This is the third column that should be abit short
compared to other which are relatively long.</p>
</div>
</div>

Once you run this on your browser, you should see three paragraphs stacked one on top of the other.

We are going to edit the CSS file.

The CSS

Next, we are going to define the width of the row and columns.

.row {
width:100%;
}
.column {
width:50%;
height:200px;
}

The 3 paragraphs only occupy half the page now.

To bring the columns side by side, float the columns to the left. i.e.

.column {
width:50%;
height:200px;
float:left;
}

The first two columns/ paragraphs should be floating side by side.

However, as you have noted the third columns is also floated. Anything you add after the columns will also be floated. To prevent this we need to clear the float effect. Add this CSS snippet to clear floats.

.row:after {
clear:both;
}

And there you have it. You have created two rows using plain HTML and CSS.

Thanks for reading through. If you liked this article give some claps to show your appreciation.

Avic Ndugu

Written by

Web developer, graphic designer and tech enthusiast. I also enjoy reading & writing informative articles. Contributor of tunapanda.org medium publication.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade