Doctype not working as it should be

Question

I have a problem with doctype,it seems when I add it,in my page,the css doesnt work.But when i remove doctype,everything works fine.what could be the reason

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="wrapper">
    <div id="header">this is my header
    </div>
    <div id="center_content">
        <div id="left">
        </div><div id="right"></div>
    </div>
    <div id="footer">this is my footer
    </div>
</div>
</body>
</html>

css

body
{

margin:0px;
padding:0px;

}
#wrapper
{
height:100%;
width:100%
}
#header
{
width:100%;
height:20%;
background-color:red;
}
#center_content
{
min-height:79%;
height:auto;
background-color:pink;
overflow:auto;

}
#footer
{
height:5%;
background-color:blue;  
}
#left
{
float:left;
min-height:79%;
height:auto;
width:20%;
background-color:brown;
}
#right
{
float:right;
min-height:79%;
height:auto;
width:79%;
background-color:yellow;

}

Live link ? Check your console for errors, also since you are using the html5 doctype you don't need to set a type for the css link — Patsy Issa, Apr 02 '14 at 06:32
I think you have a different definition of "should" from the standard. — BoltClock, Apr 02 '14 at 06:32
Height in percentage for an element is only _supposed_ to work if the height for the parent element is explicitly set. — CBroe, Apr 02 '14 at 06:42
There's a specific reason why percentage heights work without a DOCTYPE. See my explanation here: http://stackoverflow.com/a/32215263/3597276 — Michael Benjamin, Sep 01 '15 at 20:57

score 1 · Answer 1 · answered Apr 02 '14 at 07:39

Your doctype is not the issue. You just need to understand when using % percentage you should also declare percentage width and height to the parent/ancestor which is <html> and <body>.

I had modified your css. try this.

html, body {
    margin:0px;
    padding:0px;
    width: 100%;
    height: 100%;
}
#wrapper {
    height:100%;
    width:100%;
}
#header {
    width:100%;
    height:20%;
    background-color:red;
}
#center_content {
    height:79%;
    background-color:pink;
    overflow:auto;
}
#footer {
    height:5%;
    background-color:blue;
}
#left {
    float:left;
    height:100%;
    width:20%;
    background-color:brown;
}
#right {
    float:right;
    height:100%;
    width:79%;
    background-color:yellow;
}

So, when you removed the doctype it enters in Quirks Mode which is why it renders fine without the doctype.

Doctype not working as it should be

1 Answers1