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>
</body>
</html>
Next: Setting the Space Between Lines >>
More Style Sheets Articles
More By James Payne
/ 2 
