This needs to be a simple one but I why the height specified in percentage for a div is not apply to it.For example:\[code\]<div class="container"> adsf</div>\[/code\]CSS:\[code\].container{ width:80%; height:50%; background-color:#eee;}\[/code\]When I change height from % to px it works perfectly. % is as valid as px but why only px works and % not. here is the jsfiddleEdit Though I missed the semicolon after 50% in original question which totally spoiled it. In fact what I intended to ask was why does the 50% does not make it consume the 50% of its container. It only takes its height from its content rather than 50% of its container.