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).
The left div is styled with
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.
The two divs are placed side by side as if they were cells in a table; this is achieved through the display property
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).
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.