Relative css size for parent parent
I ask about this because I saw a 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> Is it possible to set the css child relative width (in% unit) to grand , completely ignoring the parent width. eg:
#child{ width: 25% of grand width } A few clarifications have been added:
Consider this:
parent has 6 child , and we want to show only 4 topics so that they have 25% of the width of grand .
#grand{ width: 900px; overflow: hidden } #parent{ width: 9999px; } .child{ width: 900px; width: 25% of grand width } You can use%, as well as the size of parent;), so it is much easier to decide how many / a lot of children 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 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> In fact, you can, BUT this requires that grandparents have position:relative and absolutely grandson positioning.
I suspect this is a rib, 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> You can use em units. It does not require JavaScript or has an absolute position.
As soon as you want to display some text content, reset the font size back within the content / 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>