How to make a child DIV's width wider than the parent DIV using CSS?

Spread the love

Sometimes, we want to make a child DIV’s width wider than the parent DIV using CSS.

In this article, we’ll look at how to make a child DIV’s width wider than the parent DIV using CSS.

To make a child DIV’s width wider than the parent DIV using CSS, we make it have absolute position.

For instance, we write

.child {
  position: absolute;
  left: 0;
  overflow: visible;
  white-space: nowrap;
}

to add position: absolute; to make the child div have absolute position.

Then it can have whatever width we want.

We add overflow: visible; to make it show content that overflows it.

To make a child DIV’s width wider than the parent DIV using CSS, we make it have absolute position.

How to make a child DIV’s width wider than the parent DIV using CSS?