Sizing elements
2012/05/20 Css resources, examples & tutorials for webmasters and online professionals
Sizing elements
img{ width: 200px; height: 400px; } Setting the right size for your elements
Each element on your website can set to a specific size. Naturally you can size an image or <div> element, but even non-block elements can be set to a specific width or height if you define if you want (read more about this on the display tag).
In this tutorial I will discuss height, max-height, min-height, width, min-width and max-width. Other tags like line-height, padding and margin will also influence the height of an element.Height
As you might have guessed height determines the height of an element.
The values you can use are auto, absolute value and a percentage. The default value is always auto.
- absolute value set the height to an specific height (in cm, mm, in, pt, em or px). For example: height: 200px;
- auto The browser sets the height by looking at the content of the element (for example, more text will make the element heigher).
- % Set the height in a percentage of the parent object. For example if the height of the page is 100% (you need to set this to the body element) than giving the first div on your page a height of 50% will fill up half of the height of the page. This does not always work as expected, because it depends on the height of other elements on your page.
Max-Height and Min-Height
Max-height sets the maximum value an element can have, but no minimum. This is convenient if you want your page to have the height of your text, but not more than a specific height.
Min-height is the oposite of max-height. The height can be as much as is needed for the content, but even if there is no content in your element the height will still be what you specified with min-height.
Max-height and min-height are no supported by all browsers, though most modern browsers do support it. If you still have viewers who our using IE6 though you might want to create a specific stylesheet for those visitors.
Width
Width works exactly as height. You can use the same values as explained above.
It is also possible to use min-width and max-width, as long as you remember that some older browsers will not understand it.
Overview
| CSS tag | Posible values | Description |
| width | auto, specific value (cm, mm, in, pt, em or px) or % | Defines the width of the HTML element |
| height | auto, specific value (cm, mm, in, pt, em or px) or % | Defines the height of the HTML element |
| min-width | auto, specific value (cm, mm, in, pt, em or px) or % | Sets the minimum width, while leaving the maximum width at auto |
| min-height | auto, specific value (cm, mm, in, pt, em or px) or % | Sets the minimum height, while leaving the maximum height at auto |
| max-width | auto, specific value (cm, mm, in, pt, em or px) or % | Sets the maximum width, while leaving the minimum width at auto |
| max-height | auto, specific value (cm, mm, in, pt, em or px) or % | Sets the maximum height, while leaving the minimum height at auto |
Leave a reply.