Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
divs
side

How to make side by side divs in HTML

Educative Answers Team

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).

svg viewer

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.

  • HTML

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).

  • HTML

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.

  • HTML

RELATED TAGS

html
divs
side
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring