Relative css size to parent of parent

Question

I am asking this because I saw very similar question to mine here. having

<div id="grand">
    <ul id="parent">
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
    </ul>
</div>

Can one set css width of child relative ( in % unit ) to that of grand, completely ignoring value of parent's width. for example:

#child{ width: 25% of grand's width }

Some explanations added:

Consider this:

parent has 6 childs in it and we want to show just 4 of theme so that they should have 25% of grand's width.

#grand{
    width: 900px;
    overflow: hidden
}
#parent{
    width: 9999px;
}
.child{
    width: 900px;
    width: 25% of grand's width
}

if you want the width of the grand parent, why keeping in the parent? I don't think there will need of this requirement. please explain. — Mr_Green, Jul 10 '15 at 14:13
btw, you can do that by giving `position: relative` to the grand parent and then `position: absolute` to the grand child. but that will break the layout. if you are okay, then go with this. — Mr_Green, Jul 10 '15 at 14:15

G-Cyrillus · Accepted Answer · 2015-07-10T14:35:05.433

You could use % as well to size parent ;), so it is much easier to decide how much/many of child can be seen.

#grand {
  width: 900px;/*update this to whatever : 100% to any other value/units */
  overflow: hidden
}
#parent {
  width: 1000%;
}
.child {
  float: left;
  box-shadow: inset 0 0 0 1px;
  width: 2.5%;/* wich is here 25% of grand's width */
}
body {
  margin: 0;
}
ul {
  padding: 0;
  list-style-type: none;
}

<div id="grand">
  <ul id="parent">
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
  </ul>
</div>

Paulie_D · Answer 2 · 2015-07-10T14:32:38.797

2

As a matter of fact, you can BUT it requires that the grandparent have position:relative and the absolutely positioning the grandchild.

I suspect this is an edge case but it is possible.

#grand {
  padding: 5%;
  width: 80%;
  border: 1px solid red;
  position: relative;
}
#parent {
  height: 150px;
  width: 60%;
  background: red;
  margin: auto;
}
#child {
  height: 100px;
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background: blue;
  color: white;
}

<div id="grand">Grand
  <div id="parent">Parent
    <div id="child">Child</div>
  </div>
</div>

edited Jul 10 '15 at 14:32

answered Jul 10 '15 at 14:21

Paulie_D

107,962
13
142
161

Please consider the latest edited question, as I have 6 children in parent not one – Jul 10 '15 at 14:33
Please don't change questions with **new information** that invalidate answers. It's better to ask a **new** question and refer back to the original. See [**HERE**](http://meta.stackoverflow.com/questions/298798/editing-questions-after-initial-post?cb=1) – Paulie_D Jul 10 '15 at 14:35

score 0 · Answer 3 · answered Jul 10 '15 at 14:27

You could use em units. This doesn't require JavaScript or having to absolutely position.

Once you want to display some text content, reset the font-size back within a content span/div.

http://jsbin.com/xibocodaba/edit?html,css,output

div
{
  height:100%;
}

#grand
{
  font-size:300px;
  border:1px solid blue;
  width:1em;
  height:30px;
}

#parent
{
  border:1px solid red;
  width:.1em;
}

#child
{
  border:2px solid gold;
  width:.25em;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="grand">
    <div id="parent">
        <div id="child">
          
        </div>
    </div>
</div>
</body>
</html>

Relative css size to parent of parent

3 Answers3