How to add two divs, one fixed width, the other, the rest with CSS?

Spread the love

Sometimes, we want to add two divs, one fixed width, the other, the rest with CSS.

In this artiocle, we’ll look at how to add two divs, one fixed width, the other, the rest with CSS.

How to add two divs, one fixed width, the other, the rest with CSS?

To add two divs, one fixed width, the other, the rest with CSS, we use flexbox.

For instance, we write

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

to add nested divs.

Then we write

.box {
  display: flex;
}

.left {
  flex: 1;
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px;
  border: 1px dashed #00f;
}

to make the outer div a flex container with display: flex;.

Then we make the left div a stretch to fill the remaining width with flex: 1.

And we make the right div stay at 250px width with flex: 0 0 250px;.

Conclusion

To add two divs, one fixed width, the other, the rest with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *