Height and width style sheet properties can be tricky, but it is something that all web developers need to have a firm handle on.
You can specify the height and width using an absolute designator, cm, mm, in, pt, or pc or a relative units designator, em, ex, or px. We can override the properties, using style.
When defining the width and height of a divider, we need to understand what the size of our content is. The size of the content will dictate the size of the divider. Usually percentage or pixels will suffice for most applications.
If you don't know the size of your content, you need to fall back on percentages. The area of your screen is calculated based on the percentage you provide, in the style property.
If you are a web developer, you are well aware that static data is different than dynamic data, when defining your screen area's.
Working with static data, is allot simpler than working with dynamic data. With static data, you can easily estimate your screen size.
When working with dynamic data, often you will not know the height or width of your divider. Depending on the amount of data you are displaying.
There are two ways of dealing with this. You can either use a paging system, or define your dynamic data area's using percentages.
When defining the width take the total screen area, and divide into as many parts as you need. Height is different, you can either input an approximate value, or you can set your height to a 100 percent.
According to Cascading Style Sheets, Level 2.1 (CSS 2.1), if the height of the containing block is not explicitly set, then the element has no maximum height and the max-height property will be interpreted as zero percent. See, Cascading Style Sheets, Level 2.1 (CSS2.1).
When planning your website, make sure you estimate your screen area's correctly. A tool that may assist you in doing this is called CSSDesk.
