<html>
<head>
<title> CSS Example </title>
<style type="text/css">
#mainpage{
margin: 5px;
padding: 10px;
border: 2px solid #7E587E;
width: 100%;
height: 100%;
background-color: #C8BBBE;
}
#introbox{
padding: 10px;
width:100%;
height: 10%;
border: 1px solid #461B7E;
background-color: #EBDDE2;
text-align: center;
font-size: 40px;
}
.lineheight30{
line-height: 30px;
}
#maxheight50{
margin-top:5px;
padding: 5px;
max-height: 50%;
width: 100%;
border: 1px solid #461B7E;
background-color: #EBDDE2;
font-size: 20px;
font-family: calibri;
}
#minheight20{
margin-top: 5px;
padding: 5px;
min-height: 20%;
width: 100%;
border: 1px solid #461B7E;
background-color: #EBDDE2;
}
#maxheight{
margin-top: 5px;
margin-right: 5px;
padding: 5px;
max-height: 30%;
width: 45%;
border: 1px solid #461B7E;
background-color: #EBDDE2;
float: left;
}
#minwidth{
margin-top:5px;
margin-right:5px;
padding: 5px;
border: 1px solid #461B7E;
background-color: #EBDDE2;
height: 10%;
min-width: 45%;
float: right;
font-style: italic;
}
</style>
</head>
<body>
<div id="mainpage">
<div id="introbox">
Width and Height properties in CSS
</div> <!--introbox div ends -->
<div id="maxheight50">
<span class="lineheight30"> <p> This is an example of a div with max height of 50% </p>
<p></p>
</span>
</div> <!-- maxheight50 div ends -->
<div id="minheight20">
<p> This is an example of a div with minimum height of 20% </p>
</div> <!--minheight div ends here -->
<div id="maxheight">
<ul> <li> Width </li>
<li> Min-width </li>
<li> Max-width </li>
<li> Height </li>
<li> Min-height </li>
<li> Max-height </li>
<li> Line-Height </li>
</ul>
</div> <!-- leftmenu div ends-->
<div id="minwidth">
<p> This is an example of a div with minimum width of 45% </P>
</div> <!--minwidth div ends -->
</div> <!-- Mainpage div ends -->
</body>
