STRANGE, in skeleton framework if I remove the content from last two divs (out of three divs appearing in a row) and then try to map these two divs height with first div height, applying height:100% to html, body, parent and all these three/last two divs.
The height doesn't set proper to any element. Moreover height appears strangely different when viewed in browser (mozilla / chrome) with and without keeping open the 'inspect element' panel .
Can anybody explain, why this happen. And how height for empty div can be achieved in this case.
<------------------------------------------------->
<---------------------------------------------------->
@mamuz, I'm talking about the skeleton default code [html/css package] which one can be downloaded from download section of skeleton website i.e. http://www.getskeleton.com. I tried adding height attribute for three divs those appear bottom in the section next to each other in a row with heading 'About Skeleton', 'Three Core Principles' and 'Docs & Support' respectively.
I added following lines in layout css:
html {
height: 100%;
}
body {
height: 100%;
}
.main { <!--class name applied to container or parent div -->
height: 100%;
}
.first-child, .second-child, .third-child { <!--class name given two three divs from left to right-->
height: 100%;
}
Apart above code, I just made second and third div empty and left the text content in first div only. To see if second and third divs match to the height of first div.