How to make side by side divs in HTML

There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, margin, display, and flex).

Using float and margin

The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen.

The right div is then set to margin-left:50% – this immediately places it to the right of the left div.

Using display with table

The two divs are placed side by side as if they were cells in a table; this is achieved through the display property table.

Both of the divs are part of a single row (note the display: table-row property in line 5).

Each of the div is a cell in the table (note the display: table-cell property for the divs in lines 6 and 9).

Using flex

The latest versions of CSS and HTML come with a new display feature called flex. Once the left div is assigned a width (half of the screen in this case) the right div is styled with flex-grow:1; this way, the right div will occupy the remaining space in the parent div.