The Web Just This Site

NM Web Tutorials

Layout: Size of a Division

I just wanted to reiterate how to do this, as it is an important tool.

CSS

What The Code Does

#my_division {
background:#00CC99;
display:block;
height:100px;
width:180px;
}

 

The background colour wasn’t really necessary, but I thought it would help you visualize the area better.

So just be sure to keep in mind what was said about the padding, and how you may need to adjust the height and width accordingly. One other thing about the height and width, be sure that it is at least the size of your content, because in some browsers your content will be cut off if your display block is set too small, yet it may display fine in other browsers. If you don’t have Dreamweaver, there is a really quick and simple method to see exactly how big you set your display block is, put a border around it by adding this property:

border: #000000 solid 1px;

The first part is the colour of the border, the second is the type of border, and the last one is the thickness of the border. Check out the List of borders, colours, and properties.