So far in this series we have covered the basic syntax of CSS, how to work with backgrounds, text, fonts, borders, outlines, margins, cell padding, lists, and tables. Starting in this tutorial we will cover some of the more advanced CSS techniques, beginning with using the various dimension properties. There are quite a few, and hopefully we will cover all of them in this article.
CSS: Dimensions - Setting the Maximum Height and Minimum Height (Page 3 of 5 )
You can set the maximum and minimum heights of an element as shown in the following couple of examples.
Here's how to set the maximum height with pixels:
<html>
<head>
<style type="text/css">
p
{
max-height: 15px
}
</style>
</head>
<body>
<img src="sample.gif" width="100" height="80" />
</body>
</html>
And here's how to set the maximum height with a percentage:
<html>
<head>
<style type="text/css">
p
{
max-height: 20%
}
</style>
</head>
<body>
<img src="sample.gif" width="100" height="80" />
</body>
</html>
Here's an example of setting the minimum height with pixels:
<html>
<head>
<style type="text/css">
p
{
min-height: 20px
}
</style>
</head>
<body>
<img src="sample.gif" width="100" height="50" />
</body>
</html>
And here's how you would set the minimum height with a percentage:
<html>
<head>
<style type="text/css">
p
{
min-height: 20%
}
</style>
</head>
<body>
<img src="sample.gif" width="100" height="15" />
</body>
</html>
Likewise, you can set the maximum width of an element with pixels:
<html>
<head>
<style type="text/css">
h1
{
max-width: 200px
}
</style>
</head>
<body>
<h1>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. </h1>
</body>
</html>
Or you can set the maximum width with a percentage:
<html>
<head>
<style type="text/css">
h1
{
max-width: 20%
}
</style>
</head>
<body>
<h1>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. </h1>
</body>
</html>
Not surprisingly, you can also set the minimum width with pixels:
<html>
<head>
<style type="text/css">
h1
{
min-width: 150px
}
</style>
</head>
<body>
<h1>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. </h1>
</body>
</html>
Or you can set the minimum width with a percentage, as shown below:
<html>
<head>
<style type="text/css">
h1
{
min-width: 150%
}
</style>
</head>
<body>
<h1>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. </h1>
Style Sheets 
/ 3 
HTML5 Boilerplate Introduction
