# How do I put two divs side by side inside a container?

Source: https://coursesweb.net/forum/t/how-do-i-put-two-divs-side-by-side-inside-a-container/
Site: CoursesWeb Forum, category CSS Layout: Flexbox and Grid
Published: 2026-11-11. Updated: 2026-11-11. Replies: 0.

## Question by Teodora Vance (staff), 2026-11-11

Make the container a flex container with display flex, and the two divs inside it line up in a row on their own. Give each div a flex value so they share the width, add a gap for the space between them, and let them wrap onto separate lines on a narrow phone.

## A minimal working example

This is the smallest version that works. One parent div (the container) holds two child divs:

```html
<div class="container">
  <div class="box">Left</div>
  <div class="box">Right</div>
</div>
```

```css
.container {
  display: flex;
  gap: 1rem;
}

.box {
  flex: 1;
  padding: 1rem;
  background: #eef2f7;
}
```

Two equal columns, with 1rem (one root font size) of space between them. `flex: 1` tells each box to take an equal share of whatever width is left.

Want a fixed sidebar and a main area that fills the rest? Change the two child rules:

```css
.sidebar { flex: 0 0 250px; }
.main    { flex: 1; }
```

The sidebar stays 250px wide and never grows or shrinks. The main area takes all the remaining space.

## Why this works

A div is a block element, so by default each one takes the full width and stacks under the previous one. When you set `display: flex` on the parent, its direct children stop stacking. MDN's [flexbox guide](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) explains that flexbox is a one-dimensional layout method for arranging items in rows or columns, and that `flex-direction` is `row` by default, so the children are laid out in a row in the direction your browser's language reads. The parent is called the flex container. Its children are the flex items.

If you want the background on block versus inline elements, our tutorial on [HTML div and span](https://coursesweb.net/html/div-span) covers it.

## Which method should you pick?

You will see older answers that use float or inline-block. Here is how the four compare:

| Method | Good for | Watch out for |
| --- | --- | --- |
| float | Wrapping text around an image | Parent collapses to zero height unless you clear it. Not meant for page columns |
| inline-block | Small rows of buttons or tags | A gap appears between boxes from the spaces in your HTML |
| flexbox | One row or one column of items, like two divs, a nav bar, a card row | Only controls one direction at a time |
| grid | Rows and columns together, like a full page layout or a card gallery | Slightly more to learn at the start |

For two divs, use flexbox. If you later need rows and columns together, MDN describes [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) as a two-dimensional grid system. The grid version of our example is equally short:

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
```

The `fr` unit means "a fraction of the free space", so `1fr 1fr` is two equal columns.

## Make it stack on a phone

Add `flex-wrap: wrap` and give the boxes a base width. When two boxes no longer fit in a row, the second one drops below the first:

```css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.box {
  flex: 1 1 300px;
}
```

Read `flex: 1 1 300px` as: may grow, may shrink, start at 300px.

## Mistakes beginners make

1. **Putting display flex on the wrong element.** It has to go on the parent. Setting it on the two divs does nothing to their positions, because their own children are what get arranged.
2. **Having an extra wrapper in the middle.** Flex only arranges direct children. If you have a container, then a div, then your two boxes, the middle div is the only flex item.
3. **Leftover float or width rules.** An old `float: left` or `width: 100%` from earlier CSS can fight with flexbox. Remove them from the boxes and see if the layout fixes itself.

## Check this in order

1. Open DevTools (F12), click the container in the Elements panel, and look for a small "flex" badge next to it. No badge means the rule is not applied.
2. Confirm the two divs are direct children of that container.
3. Look in the Styles panel for struck-through rules. A later rule may override yours.
4. Check that no `flex-direction: column` is set.
5. Resize the window. If the layout breaks only when narrow, add `flex-wrap: wrap`.

---
Cite as: CoursesWeb Forum, "How do I put two divs side by side inside a container?", https://coursesweb.net/forum/t/how-do-i-put-two-divs-side-by-side-inside-a-container/, accessed 2026-11-11.