Height and Width - CSS Tutorial 12

Up until now, we have not cared much about the dimensions of the elements we have worked with. In this lesson, we will take a look at how you easily can define the height and width of an element. These two things would be discussed in our this lesson.

• width
• height

Setting the width [width]

With the width-property, you can define a certain width of an element.

The simple example below provides us with a box wherein text can be typed:

 
 div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

The Result:

200px width <div> with text

volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium

Setting the height [height]

In the example above notice how the height of the box is set by the content of the box. You can affect the height of an element with the property height. As an example let us try to make the box in the example 500px high:

 
 div.box {
  height: 500px;
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

The Result:

200px width and 500px height <div> with text

volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium

Summary

Lesson 9 have given you an introduction to the box model in CSS. As you can probably see, the box model gives you many new options. You might have been using tables in HTML to create your layouts until now, but with CSS and the box model you should now be able to achieve elegant layouts more precisely and in accordance with the recommendations of W3C.

Browse More Articles

Tweet

Written by Syed Musa Raza Naqvi

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.