Show div in one line

How to show div in one line with CSS? You know  div is a block element which is shown on a separated line by default. Only inline elements such as span or a are shown in single line. But that does not mean there is no way to show div elements in one line. On the contrary, there are quite a few methods to show divs on a line using css.

  • Use css property “display:inline;”
  • Use “display:inline-block;”
  • Use “display:inline-table;” for the parent div and “display:table-cell” for the contained children divs which are shown on one line.

All these methods can show two div in one line. The difference between “display:inline” and “display:inline-block” is explained in this article. The following is an example to show 2 div in one line:

<div style="display:inline-table;"><div style="display:table-cell;">div1</div><div style="display:table-cell;">div2</div></div>

 

 

If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Leave a Reply