5 Ways To Keep Elements On The Same Line In HTML CSS

Welcome to a quick tutorial on how to keep HTML elements on the same line. So you are trying to create a “row of horizontal content”? Maybe a row of buttons, slides, pictures, or various different items.

One of the easiest ways to keep elements on the same line is to create a flexible container. For example:

  • .flex { display : flex }
  • <div class="flex"> <p>1</p> <span>2</span> <img src="3.jpg"/> </div>

But there are more ways to line things up. Let us walk through some examples – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

QUICK SLIDES

 

 

TABLE OF CONTENTS

Download & Notes Lining Up Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

ELEMENTS ON THE SAME LINE

All right, let us now get into the ways and examples of how to line the elements up in a line.

 

METHOD 1) FLEXIBLE BOX

1-flex.html
<style>
/* (A) FLEX CONTAINER */
.wrap-flex { display: flex; }
 
/* (B) NOT IMPORTANT - COSMETICS */
.wrap-flex > * {
  width: 33%;
  border: 1px solid red;
}
</style>
 
<!-- (C) THE HTML -->
<div class="wrap-flex">
  <p>Another craft hires a related tutor.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

Another craft hires a related tutor.

An ice shares a deposit.

As in the above introduction, the CSS flexible box display: flex is one of the fastest and easiest ways to lay items out in a horizontal row. We can control it in many ways too:

  • Add flex-wrap : wrap to allow the items to break into a new row.
  • Use align-items: center to vertically align all items.
  • To horizontally align the items, add justify-content: center.

Yes, there’s still a lot more to the flexible box. So I will just leave a link in the extras section below if you want to learn more.

 

 

METHOD 2) CSS GRID

2-grid.html
<style>
/* (A) GRID LAYOUT - 3 EQUAL COLUMNS */
.wrap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
 
/* (B) NOT IMPORTANT - COSMETICS */
.wrap-grid > * { border: 1px solid green; }
.wrap-grid img { width: 100%; }
</style>
 
<!-- (C) THE HTML -->
<div class="wrap-grid">
  <p>Another craft hires a related tutor.</p>
  <span>An ice shares a deposit.</span>
  <img src="alpaca.jpg"/>
</div>

Another craft hires a related tutor.

An ice shares a deposit.

The grid layout is another convenience of modern CSS.

  • Just set the <div> container to display: grid.
  • Define the columns with grid-template-columns and that’s it.

 

 

METHOD 3) DISPLAY AS TABLE

3-table.html
<!-- (A) THE CSS -->
<style>
/* (A) LAYOUT CONTAINER AS A TABLE */
.wrap-table { display: table; }
 
/* (B) "CONVERT" ITEMS TO TABLE CELLS */
.wrap-table > * { display: table-cell; }
 
/* (C) NOT IMPORTANT - COSMETICS */
.wrap-table > * { border: 1px solid blue; }
.wrap-table img { width: 100%; }
</style>
 
<!-- (D) THE HTML -->
<div class="wrap-table">
  <p>Another craft hires a related tutor.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

Another craft hires a related tutor.

An ice shares a deposit.

This is a rather funky method, but it works.

  • Set the <div> wrapper to display as a table – display: table
  • Then, set all the items inside .wrap-table > * to show as table cells – display: table-cell.

 

METHOD 4) FLOAT

4-float.html
<style>
/* (A) CLEARFIX CONTAINER */
.wrap-float {
  overflow: auto;
  width: 100%;
}
.wrap-float::after {
  content: "";
  clear: both;
  display: table;
}
 
/* (B) FLOAT ITEMS */
.wrap-float > * {
  display: block;
  float: left;
}
 
/* (C) NOT IMPORTANT - COSMETICS */
.wrap-float > * {
  width: 33%;
  border: 1px solid cyan;
  box-sizing: border-box;
}
</style>
 
<!-- (D) THE HTML -->
<div class="wrap-float">
  <p>Another craft hires a related tutor with the dialect.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

Another craft hires a related tutor.

An ice shares a deposit.

Next, we have an old-school method. The basic idea is actually pretty simple, but it is plagued with some underlying CSS issues.

  • (B) The main mechanism here is to set all the items .wrap-float > * to float: left. That’s all, but when all the items are floating, the container itself will “collapse”. This will cause the layout below to be destroyed.
  • (A) To fix this problem, we have to use an old CSS trick called a “clear fix” to help the container “retain its shape”.

 

 

METHOD 5) INLINE-BLOCK

5-inline-block.html
<style>
/* (A) ALL ITEMS TO INLINE-BLOCK */
.wrap-iblock > * {
  display: inline-block;
  box-sizing: border-box;
  width: 33%;
  border: 1px solid magenta;
}
</style>
 
<!-- (B) THE HTML -->
<div class="wrap-iblock">
  <p>Another craft hires a related tutor with the dialect.</p><!--
  --><span>An ice shares a deposit.</span><!--
  --><img src="fish.jpg"/>
</div>

Another craft hires a related tutor.

An ice shares a deposit.

Finally, we have yet another traditional method.

  1. Just set all the items to display: inline-block. But there is a “bug” with inline-block, the white space and line break in-between the items will show up.
  2.  This is why we add that dummy comment <!-- --> between each item to prevent unnecessary spacing.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

WHICH IS THE BEST METHOD?

Personally, I will stick with the modern CSS flex or grid. At the time of writing, they are already well supported globally – Even on older devices… But if you have to support the ancient Internet Exploders, fallback to inline-block or float.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Keep Elements On The Same Line In CSS HTML (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *