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

A minimal working example

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

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

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

.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 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 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 as a two-dimensional grid system. The grid version of our example is equally short:

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

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