How To Keep Elements On The Same Line In HTML CSS – Simple Examples

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:

  • .flexcon { display:flex }
  • <div class="flexcon"><p>FOO</p> <p>BAR</p></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.

 

REAL 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.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

ELEMENTS ON THE SAME LINE

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

 

METHOD 1) FLEXIBLE BOX

THE CSS

1-flex.html
<!-- (A) THE CSS -->
<style>
/* (A1) FLEXIBLE CONTAINER */
.wrap-flex {
  display: flex;
  width: 100%;
  /* OPTIONAL ALIGNMENT: flex-start | flex-end | center | baseline | stretch */
  align-items: center;
}
 
/* (A2) NOT IMPORTANT, JUST TO BETTER SHOW HOW ALIGN-ITEMS WORK */
.wrap-flex > * {
  border: 1px solid red;
  width: 33%;
}
</style>

THE HTML

1-flex.html
<!-- (B) THE HTML -->
<div class="wrap-flex">
  <p>Another craft hires a related tutor with the dialect.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

Flexible box, the magic and convenience of modern CSS. This is the method that I will highly recommend, and very easy to use:

  • Just set the parent <div> container to display: flex. That’s all.
  • It is optional to set the width of the items, and we can control the vertical alignment of the items using align-items.

 

 

METHOD 2) CSS GRID

THE CSS

2-grid.html
<!-- (A) THE CSS -->
<style>
/* (A1) GRID CONTAINER & LAYOUT TEMPLATE */
.wrap-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  /* ALSO POSSIBLE TO "ASSIGN" EXACT WIDTH
  grid-template-columns: 25% 25% 50%; */
}
 
/* (A2) NOT IMPORTANT */
.wrap-grid > * { border: 1px solid red; }
</style>

THE HTML

2-grid.html
<!-- (B) THE HTML -->
<div class="wrap-grid">
  <p>Another craft hires a related tutor with the dialect.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

Grid layout, another convenience of modern CSS. This is another method that I will recommend and just as easy to use:

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

 

METHOD 3) DISPLAY AS TABLE

THE CSS

3-table.html
<!-- (A) THE CSS -->
<style>
/* (A1) "CONVERT" CONTAINER TO TABLE */
.wrap-table {
  display: table;
  width: 100%;
}
 
/* (A2) "CONVERT" ITEMS TO TABLE CELLS */
.wrap-table > * {
  display: table-cell;
  /* Optional */
  width: 33%;
  border: 1px solid red;
}
</style>

THE HTML

3-table.html
<!-- (B) THE HTML -->
<div class="wrap-table">
  <p>Another craft hires a related tutor with the dialect.</p>
  <span>An ice shares a deposit.</span>
  <img src="fish.jpg"/>
</div>

A rather funky method, but it works.

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

 

 

METHOD 4) FLOAT

THE CSS

4-float.html
<!-- (A) THE CSS -->
<style>
/* (A1) FULL-WIDTH CONTAINER */
.wrap-float { width: 100%; }
 
/* (A2) CLEARFIX */
.wrap-float::after { clear: both; }
 
/* (A3) FLOAT ALL ITEMS TO THE LEFT */
.wrap-float > * {
  display: block;
  float: left;
  /* Optional */
  max-width: 33%;
  border: 1px solid red;
}
</style>

THE HTML

4-float.html
<!-- (B) 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>

This is an old-school way to line elements up, the recommend method if you have to support ancient browsers.

  • 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” – Causing the layout below to be destroyed.
  • To fix that “collapsed container” problem, we have to use an old CSS trick called “clearfix” – Which is that .wrap-float::after { clear: both }.

 

 

METHOD 5) INLINE BLOCK

THE CSS

5-inline-block.html
<!-- (A) THE CSS -->
<style>
/* (A1) FULL-WIDTH CONTAINER */
.wrap-iblock { width: 100%; }
 
/* (A2) ALL ITEMS TO INLINE-BLOCK */
.wrap-iblock > * {
  display: inline-block;
  /* Optional */
  width: 33%;
  border: 1px solid red;
}
</style>

THE HTML

5-inline-block.html
<!-- (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>

Finally, we another traditional method.

  • 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.
  • This is why we add that dummy comment <!-- --> between each item to prevent unnecessary spacing.

That’s it. But I will not recommend using this unless you have to support the older browsers.

 

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.

 

INFOGRAPHIC CHEAT SHEET

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

 

LINKS & REFERENCES

 

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 *