Problem with height

HTML & CSS
1

Hy, I have a problem, when I using height attribute in % it’s not working, working when I use in px, I want to use height attribute in %, please someone help.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Width and Height </title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>

<style >
html{background-color:whitesmoke;}

p#a {width: 15%; height: 50%;
background-color: white; color: red; border-style: solid;
border-color: red; border-width : 2;}

p#b{background-color:white;color:blue;border-style:solid;
border-width:2;border-color:blue;height:200px;width:25%;}

</style>
</head>
<body>
<img src=“images/system.png” width=“128” height=“128”/>
<p id=“a”>Blue</p>
<p id=“b”>Green</p>
<p>Red</p>
</body>
</html>

2

Hi stanke. Welcome to the forums. :slight_smile:

The problem with % height is that it needs to be measured in relation to something. The element will ask itself “50% of what?” Unless the parent has a set height, there’s no basic on which to set a height. Setting heights is rarely a good idea anyhow.

3

Thank you

4

Read the CSS faq on 100% height for a better understanding of percentage height :slight_smile:

As Ralph mentioned apart from a few cases you don’t really want a height on containers that hold fluid content anyway.