i'm trying to set some elements' width with percentage relative to grandparent elements' width. like this.

<style>
.grand{width:1000px; overflow:hidden;}
.parent{width:2000px; position:relative}
.child1{float:left; width:50%; height:200px; background-color:blue;}
.child2{float:left; width:50%; height:200px; background-color:green;}
</style>


<div class="grand">
 <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
 </div>
</div>

But i have no idea how to make this done, how can i make child elements refer directly to it's grandparent elements not direct parent elements? ( in this case if i set child elements width 50% it has to be 500px, not 1000px. )

are there possible ways to do this?

i'm trying to set some elements' width with percentage relative to grandparent elements' width. like this.

<style>
.grand{width:1000px; overflow:hidden;}
.parent{width:2000px; position:relative}
.child1{float:left; width:50%; height:200px; background-color:blue;}
.child2{float:left; width:50%; height:200px; background-color:green;}
</style>


<div class="grand">
 <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
 </div>
</div>

But i have no idea how to make this done, how can i make child elements refer directly to it's grandparent elements not direct parent elements? ( in this case if i set child elements width 50% it has to be 500px, not 1000px. )

are there possible ways to do this?

• javascript
• jquery
• css
• width

5 Answers 5

You can use CSS custom properties, var() and calc() functions

.grand {
--main-width: 1000px;
  width: 1000px;
  overflow: hidden;
}

.parent {
  width: calc(var(--main-width) * 2);
  position: relative
}

.child1, .child2 {
  float: left;
  width: calc(var(--main-width) / 2);
  height: 200px;
}

.child1 {
  background-color: blue;
}

.child2 {
  background-color: green;
}

<div class="grand">
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</div>

You can use absolute position to child element.

Apply this css:

.grand{width:1000px; overflow:hidden; position:relative;height:200px;}
.parent{width:2000px; }
.child1{float:left; width:50%; height:200px; background-color:blue; position:absolute; top:0; left:0;}
.child2{float:left; width:50%; height:200px; background-color:green; position:absolute; top:0; left:50%;}

How about using container query widths?

<style>
    .grand{ width:1000px; overflow:hidden; container-type: inline-size; container-name: grand;}
    .parent{ width:2000px; position:relative}
    .child1{ float:left; width:50cqw; height:200px; background-color:blue;}
    .child2{ float:left; width:50cqw;; height:200px; background-color:green;}
</style>

<div class="grand">
    <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
</div>

Please change it to:

.parent{width:2000px; position:relative} --> .parent{width:1000%; position:relative; display: inline;}

#grand {width: 1000px; height:200px; overflow: hidden; position: relative;}
#parent {min-width: 100%; height: 100%; display: flex;}
.child {flex: 1; height: 100%;}

<script>
  var childCount = 4;
  var childSize = 50; // in percentage
  document.getElementById("parent").style.width = (childSize * childCount) + "%";
</script>
<div id="grand">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>