Say I have this HTML
<div id="outer">
<div id="inner">
<div id="nested">
</div>
</div>
</div>
Where
With CSS, is there a way to set the width of #nested so that it's a percentage of the width of #outer?
I found an answer with CSS container queries MDN container queries
With this HTML
<body>
<div id="outer">
<div id="in">
<div id="inner">
<div id="nested">
<p style="font-size: 2rem;">Hello!</p>
</div>
</div>
</div>
</div>
</body>
and this CSS
body {
background-color: #2C2C2C;
}
div {
box-sizing: border-box;
position: absolute;
}
#outer {
left: 10px;
top: 10px;
height: 100px;
width: 80%;
container-type: inline-size;
container-name: bar;
border: 1px dotted red;
}
#in {
background-color: rgb(202, 243, 161);
top: 0;
bottom: 1px;
left: 10px;
width: 20%;
overflow: visible;
}
#inner {
background-color: rgb(221, 175, 114);
top: 0;
bottom: 1px;
left: 50px;
width: 20%;
overflow: visible;
}
#nested {
background-color: rgb(37, 231, 167);
top: 0;
left: 0;
bottom: 25%;
height: 75%;
}
@container bar (min-width: 1px) {
#nested {
width: 50cqw;
}
}
the width of #nested is responsive at 50% of the width of #outer (and not of its immediate parent.) I still need to do a bunch of testing, and to work out the appropriate value to use in @container but I'm well on the way.
You can do so with position: relative and position: absolute
Both these attributes go hand-in-hand as the absolute element is positioned relative to its closest parent/ancestor. It goes up to the body tag if none are found. By setting position: relative on outer, you make it the closest ancestor, so the width of nested adjusts in relation to that.
#outer {
height: 10rem;
width: 80vw; /* 80% of the screen width */
background: red;
position: relative;
}
#inner {
height: 10rem;
width: 80%;
background: gray;
}
#nested {
height: 10rem;
width: 50%;
background: black;
position: absolute;
}<div id="outer">
<div id="inner">
<div id="nested">
</div>
</div>
</div>
inner doesn't need a position attribute, or do you mean your outer already has a position?Take advantages of the CSS FlexBox Layout and the flex property and all of its great features. You can read more about flex on this link. Check my example below using the flex value in the display property. Happy Coding!
body {
background-color: #000738;
}
#outer {
width: 80%;
margin: 0 auto;
background-color: #ef3340;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
#inner {
width: 79%;
background-color: #04aeec;
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
#nested {
width: 77%;
background-color: #88df80;
height: 60vh;
}<div id="outer">
<div id="inner">
<div id="nested">
</div>
</div>
</div>
