How to make side by side divs in HTML

In this article, you will learn how to make side by side divs in HTML using float, margin, display, and flex.

Using Float property#

1. Create the first div with a unique class or id, ensuring it includes the desired width.
2. Add the float: left property to this div, which moves it to the left side of the screen.
3. Create a second div and ensure it has a unique class or id.
4. Set the width of the second div, also leaving room for any desired padding or margins.
5. Add the float: left property to this div, which moves it to the left side of the screen.
6. Ensure both divs add up to a total of 100% (or less if they include margins or padding).

Using CSS Margin and display property#

1. Create the first div with a unique class or id, along with specifying the width and height.
2. Set the margin-right property on the first div to push your second div away from the first.
3. Create a second div and ensure it has unique sizing and spacing.
4. Set the margin-left property on the second div, pushing it over to the side of the first div.
5. Ensure that both divs add up to a total of 100% (or less if they include margins or padding).

Using Display flex property#

1. Create a container with unique sizing, and specify its "display" as either "flex" or "grid".
2. Add the first div to the container and set its sizing as-needed.
3. Add the second div to the container, ensuring its sizing meets your needs.
4. Use the "justify-content" property to move divs to the left, right, or center based on your needs.
5. Set your desired width for each div, using percentages or pixels.