width percent problem

hi there, I am starting in css and html, and as a first try I want to make a fluid page with two divs. The problem is that the defined percentage dimension for the divs does not function. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/teste.css" />
<title>Insert title here</title>
</head>
<body>

<div id="d1">
</div>

<div id="d2">
</div>

</body>
</html>

here is the css


@CHARSET "ISO-8859-1";

body {
 background-color: rgb(0,200,200);
 width: 100%;
 height: 100%;
}

#d1 {
 background-color: rgb(0,0,255);
 width: 100%;
 height: 20%;
}


#d2 {
 background-color: rgb(0,255,255);
 width: 100%;
 height: 80%;
}

All I get is two divs with the default dimensions. Strange, when I change the css to this it functions correctly


@CHARSET "ISO-8859-1";

* {
 width: 100%;
 height: 100%;
}

body {
 background-color: rgb(0,200,200);
 width: 100%;
 height: 100%;
}

#d1 {
 background-color: rgb(0,0,255);
 width: 100%;
 height: 20%;
}


#d2 {
 background-color: rgb(0,255,255);
 width: 100%;
 height: 80%;
}

I thought that setting the body width and height would do the job, but it seems it doesn't. What I'm doing wrong?

width percent problem

dmd_anfini

bzgzd

dmd_anfini

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week