CSS Dimentions

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 :

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 :

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 :

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 :

CSS Tutorial