Home/ Questions/Q 7814933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:21:45+00:00

I run into this, and I am not sure why it is happening… Taking

  • 0

I run into this, and I am not sure why it is happening…

Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why?
Many thanks in advance.

<html>
<head>

<style type="text/css">
.sec_class{
        width:50%;
        height:15%;
        border:1px black solid;
        padding:0px;
        position:relative;
        background-color:grey;
}
    </style>
</head>

<body>

<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent’s height. body has zero height in your case, and the 15% of that is still zero.

    This should help:

    html, body { height: 100%; }​

    jsFiddle Demo

    Be sure to ALWAYS include the doctype.

    • 0