Create a child element to match the width of its grandparent element

Question

Create a child element to match the width of its grandparent element

Would it be possible to make the innermost div as wide as the section in my nested structure?

Below is a snippet of the code:

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}

#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}

#inner {
  background-color: pink;
}

<body>
  <section id="content">
    <div>
      <p>
        test
      </p>
      <div id="inner">
        <p>
          inner
        </p>
      </div>
    </div>
  </section>
</body>

html css css-position stylesheet

Answer 1

Answer №1

To achieve the desired layout, you can either create a middle element with a fixed width or use negative margins along with fixed widths and paddings.

Check out the demo below which demonstrates the concept of using negative margins:

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}


#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}

#inner {
  background-color: pink;
  margin: 0 -20px;
  padding: 0 20px;
}

<body>
  <section id="content">
    <div>
      <p>
        test
      </p>
      <div id="inner">
        <p>
          inner
        </p>
      </div>
    </div>
  </section>
</body>

Answer 2

To achieve the desired layout, you can either create a middle element with a fixed width or use negative margins along with fixed widths and paddings.

Check out the demo below which demonstrates the concept of using negative margins:

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}


#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}

#inner {
  background-color: pink;
  margin: 0 -20px;
  padding: 0 20px;
}

<body>
  <section id="content">
    <div>
      <p>
        test
      </p>
      <div id="inner">
        <p>
          inner
        </p>
      </div>
    </div>
  </section>
</body>

Answer 3

Answer №2

To achieve this, you can take the following steps:

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}


#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}
#content > div {
    width: inherit;
}


#inner {
  width: inherit;
  background-color: pink;
}

Answer 4

To achieve this, you can take the following steps:

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}


#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}
#content > div {
    width: inherit;
}


#inner {
  width: inherit;
  background-color: pink;
}

Create a child element to match the width of its grandparent element

Answer №1

Answer №2

Similar questions

Show a hyperlink within dynamically retrieved HTML content

Adjust the font size of the immediate child element that belongs to the fs-5 class

Is there a way to prevent navbar links from wrapping when closed with CSS?

Is there a way to create two proportional columns using HTML/CSS, with the left column sticking to the user's view as they scroll?

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

Right-align the text in the title of the material card

Text that is not aligned in the middle and has a colored background

The jQuery scroll functionality is malfunctioning

Outdated ExpiresByType directive in .htaccess leads to website layout distortion. What is the best way to prompt the browser cache to refresh?

Having trouble accurately obtaining the height of a DIV element using jQuery

Effortlessly glide to a specific element on an HTML page

Import files from local directory to iframe in Electron application

Obtaining the node generated from a document fragment

The sticky navigation bar's background fails to change at the appropriate time following an image slider

A guide to displaying the beginning content of an HTML input element programmatically in React, specifically focusing on cases where the text exceeds the width of the input

Items seem to vanish into thin air and become immovable when attempting to relocate them

Remove vertical spacing from rows of thumbnail grid in bootstrap

Implementing timeAgo with jQuery (or a similar tool) to display the elapsed time since a user (client) accesses or updates a webpage

What is the best way to add content to a box once it has been hovered over?

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?