HTML CSS

HOW TO KEEP HTML ELEMENTS ON THE SAME LINE

<div class="wrap-flex">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

.wrap-flex { display: flex; width: 100%; }

CSS FLEX LAYOUT

01

.wrap-grid {   display: grid;   grid-template-columns: repeat(3,    minmax(0, 1fr)); }

CSS GRID LAYOUT

02

<div class="wrap-grid">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

.wrap-table { display: table; } .wrap-table > * { display: table-cell; }

DISPLAY AS TABLE

03

<div class="wrap-table">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

CLEARFIX .wrap-float { overflow: auto; width: 100%; } .wrap-float::after { content: ""; clear: both; display: table; }

FLOATING CONTAINERS

04

<div class="wrap-float">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

FLOAT ITEMS .wrap-float > * { display: block; float: left; }

<div class="wrap-iblock">   <p>Foo.</p><!--   --><span>Bar.</span><!--   --><img src="img.jpg"/> </div>

.wrap-iblock > * { display: inline-block; }

INLINE BLOCK

05