Now that we have explored box models, and how to set the padding, border and margin around an element, we can learn how to control the dimensions of an element, or box. If specific dimensions are not set, the size of the element will expand or contract to fit around the size of its contents, but there will be times when you will need an element/box to conform to a certain size. There are six properties for this purpose:
| Property | Purpose |
|---|---|
| width | Sets the Width of the Box/Element |
| min-width | Sets the Minimum Width of the Box/Element |
| max-width | Sets the Maximum Width of the Box/Element |
| height | Sets the Height of the Box/Element |
| min-height | Sets the Minimum Height of the Box/Element |
| max-height | Sets the Maximum Height of the Box/Element |
The dimensions properties can accept three types of values:
| Value | Purpose | Example | Example |
|---|---|---|---|
| Auto | Allows the Browser to Determine the Width or Height | width: auto; | height: auto; |
| Length | Fixes The Size In Pixels (px), Points (pt) or Font-Size (em) | width: 5em; | height: 5em; |
| Percent | Sets the Size As A Percentage of the Containing Element | width: 5%; | height: 5%; |
Now we can take a look at some examples of what can happen when we control the dimensions of a paragraph element. A border is added to each paragraph so that the size is visible.
p { width: 300px; height: 100px; }
p { width: 20%; }
p { min-width: 20%; } /* Notice that when a minimum is specified the element is allowed to expand, taking up as much width and height as necessary, up to 100% of the width available. */
p { max-height: 20px; } /* Notice that when a maximum is specified, if the element has more content than will fit in the space, the content will spill over the edges of the specified space. This easily causes a problem because the contents can run into other elements on the page. */
The CSS overflow property can determine how a specifically sized HTML element is displayed by adding scrollbars, hiding the excess contents, or enlarging the element so that all of its contents are visible. The overflow property can accept only four values (with no more than one of those values per declaration).
The following paragraph elements will give you an example of how that the overflow property can be used.
overflow: auto;
This paragraph has a solid 1px green border, a width of 650px and a height of 100px.
If the contents of this paragraph exceed either the width or the height specified, the "auto" value will cause scrollbars to appear so that the user can scroll up and down and/or right and left to view the contents.
overflow: scroll;
This paragraph has a solid 1px green border, a width of 650px and a height of 100px.
If the overflow value is set to "scroll" the scrollbars appear whether or not the contents exceed the width and/or height specified.
overflow: visible;
This paragraph has a solid 1px green border, a width of 650px and a height of 100px.
The overflow value "visible" will prevent any scrollbars from appearing, even if the contents of the element exceed the width and/or height specified.