The CSS provides several properties such as width, height, max-width and max-height etc. that allows you to control the dimension of a box. The following section will describe you how to use these properties to create a better web page layout.
The width and height Properties
The Width and height properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
<!DOCTYPE html>
<head>
<title>The Width and Height Property</title>
<style type="text/css">
.width_height{
width: 300px;
height: 150px;
background: #F60;
color:#FFF;
padding:10px;
}
</style>
</head>
<body>
<div class="width_height">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The max-height Property
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
<!DOCTYPE html>
<head>
<title>The max-height Property</title>
<style type="text/css">
.max_height{
width: 300px;
max-height:80px;
background: #F60;
color:#000;
padding:10px;
}
</style>
</head>
<body>
<div class="max_height">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The min-height Property
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
<!DOCTYPE html>
<head>
<title>The min-height Property</title>
<style type="text/css">
.min_height{
width: 300px;
min-height:200px;
background: #F60;
color:#FFF;
padding:10px;
}
</style>
</head>
<body>
<div class="min_height">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The max-width Property
The max-width property allows you to specify the maximum content width of a box. This maximum width does not include paddings, borders, or margins.
<!DOCTYPE html>
<head>
<title>The max-width Property</title>
<style type="text/css">
.max_width{
max-width:200px;
background: #F60;
color:#FFF;
padding:10px;
}
</style>
</head>
<body>
<div class="max_width">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The min-width Property
The min-width property allows you to specify the minimum content width of a box. This minimum width does not include paddings, borders, or margins.
<!DOCTYPE html>
<head>
<title>The min-width Property</title>
<style type="text/css">
.min_width{
min-width:300px;
background: #F60;
color:#FFF;
padding:10px;
}
</style>
</head>
<body>
<div class="min_width">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
