HTML CSS

DISPLAY DIV CONTAINER SIDE-BY-SIDE

(a quick guide)

<div class="demo">   <div>First</div>   <div>Second</div> </div>

HTML FOR ALL EXAMPLES

00

.demo { display: flex; }

FLEXIBLE BOX

01

GRID LAYOUT

02

.demo {   display: grid;   grid-template-columns: auto auto;  }

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

DISPLAY AS TABLE

03

.demo > * { display: inline-block; }

INLINE BLOCK

04

FLOAT ITEMS

05

CLEARFIX CONTAINER .demo { overflow: auto; } .demo::after { content: ""; clear: both; display: table; } FLOAT ITEMS .demo > * { float: left; }