CSS Dimensions and Resolutions

Width and Height of an Element

I wrote an article titled CSS Box in this blog. That is part 4 of this series. In that part I explain how all CSS visible elements are formed. You should read that article before reading this one. To get at the article, just type “CSS Box” and my name “Chrys” in the Search Box of this page and click Search. If you have the Google Search box on this page, use it.

If you’re a bit unsure, you can check out webpagescientist.com for a more exact and specific instruction. Moving forward, the width of an element is the width of the content area of the CSS box. The height of an element is the height of the content area of the box. So any padding, and/or border and/or margin for an element increases the effective width and height which can only be determined if you know the padding and/or border and/or margin width.

When we talk about the dimensions of an element, we are referring to the content width and content height, not the effective width and height.

Giving Dimensions to an Element

You can give the width and/or height to any visible HTML element using CSS. You have the “width” and “height” properties for this. Either of then can take a value in pixels or in percentage. The following example illustrates this for a DIV element in pixels (try the code).

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” gt;

DIV {width:50px; height:50px;border:solid 1px black}

A DIV element

The following code is similar to the above, but the unit is percentage and not pixels (try the code – the browser may not respect the height given).

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” gt;

DIV {width:50%; height:50%;border:solid 1px black}

A DIV element

When the percentage is used, the width is relative to the width of the containing element; and the height is relative to the height of the containing element.

Problem with Height

When designing your web page, you naturally can determine what the width of a containing element would be. However you usually would not know how deep the containing element would be, since you would not know in advance how much text and small elements the element would take.

When designing a web page, whether you are using pixels or percentage, if you do not give a height value to an image or any element, the browser will give you the corresponding or appropriate height. So avoid giving a height value to any image or HTML element in your design.

Computer Screen Resolution

The pixel is the smallest dot that can be displayed on a computer screen. When you have a colorful picture on the screen, it is made up of pixel dots of different colors. The total number of pixels that a screen can display is called the Resolution of the screen. Different screens have different resolutions. Common resolutions (in pixels) are, 800 X 600, 1024 X 768, 1152 X 864, 1280 X 960 and 1280 X 1024. The first number for each resolution is for the width of the displayable screen and the second number is for the height. If you multiply the width by the height, you would have the total number of dots the screen can display.

Now, the higher the resolution the bigger the computer screen. So, if you give the dimensions (widths) of your elements in pixels, the elements will appear relatively smaller in higher resolutions than in smaller resolutions. This is a disadvantage of using the pixel. What many designers do to solve this problem is that they use pixels and design their web page content to be centered on the screen width. In this way, when the resolution is small, the page content fills the width of the screen. When the resolution is large (high), the page content is at the center of the screen width.

Advantage of using the Percentage

If you give you dimensions (widths) of your elements in percentage, the elements will have the same widths in different resolutions. In containing elements, the inline elements and text will wrap into the lines below. In this way your web page will appear the same way in different resolutions.

A problem, when you work with the percentage, occurs with image maps. If you do not know what “image map” is, read the article I wrote in this blog, titled, “HTML Image Map”. In theory, an Area element of the image map can take the percentage unit for its position and size. In practice, browsers today do not accept the percentage for the Area elements. When working in percentage, you can solve this problem by keeping your image small and floating it to control its position. As the resolution changes because different users are seeing the same web page, the text and inline elements around the floated image will adjust themselves.

In this part of the series, we have looked at dimensions (sizes) and resolutions. We stop here and continue in the next part of the series.