| The width and height of block-level elements can be specified using the width and height properties (Table 6.10). Usually, the browser and default automatically set the width and height to 100 percent of the available width and whatever height is needed to display all the content. You can use CSS, however, to override both the width and height properties to your desire. Generally, you will be setting the width of an element more often than the height, unless you know the exact size of the content of the block. Table 6.10. Width and Height ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE4, FF1, S1, O3.5, CSS1 | <percentage> | IE4, FF1, S1, O3.5, CSS1 | auto | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figures 6.12 and Figure 6.13), the width and height of images on the page have been set using CSS, meaning that all images will be displayed using the exact same dimensions, regardless of what their natural dimensions are. In addition, the width of the navigation and form text field, as well as the width and height of the copy area, are set in CSS. However, there is too much content to display in the defined area, so I have used the overflow property (see "Setting Where the Overflow Content Goes" in Chapter 8) to allow the viewer to scroll the additional material. Figure 6.12. Setting the width of an element lets you control the horizontal space your design will occupy. Height lets you control the vertical space, but needs a scroll-bar if there is more content than space. 
Figure 6.13. The scroll bar only scrolls the content in the element. 
To define the width of an element: | | 1. | width:
Type the width property name, followed by a colon (:), in the CSS declaration block (Code 6.9).
Code 6.9. Set the exact or relative width and height of an element to control your design.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CSS, DHTML & Ajax | Setting the Width and Height of an Element</title> <style type="text/css" media="screen"> <!-- body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; width: 756px; } h1, h2 { color: #999; margin: .5em 0em; } h2 { clear:both; } img { width: 100px; height: 200px; margin: 4px; display: inline; } form { padding: 1em 0em; margin: 4px 0px; border-bottom: 1px solid #666; } input.formText { width: 9cm; border: 1px solid #f66; background-color: #f99; } input.formButton { padding-right: 16px; padding-left: 16px; border: 1px solid #999; background-color: #ccc; color: #333; } #navigation { margin-right: 8px; background-color: #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation a:hover { border-top: 3px solid #999; color: red; background-color: #fff; } #copy { width: 700px; height: 300px; overflow: auto; border: 3px solid red; } # copy p { margin: 1em 5em; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 236px; padding: 6px; border: 1px solid #f66; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } --></style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT ⇒ </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER V <span >Advice from a Caterpillar</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice14a.gif" height="236" width="200" alt="Alice" /> <img src="/books/3/292/1/html/2/alice15a.gif" height="236" width="200" alt="Alice" /> ' One side will make you grow taller, and the other side will make you grow shorter.' </div> <p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> </body> </html>
|
| 2. | 700px;
Type a value for the element's width, which can be any of the following:
A length value A percentage, which sets the width proportional to the parent element's width auto, which uses the width calculated by the browser for the elementusually the maximum distance that the element can stretch to the right before hitting the edge of the window or the edge of a parent element
|
To define the height of an element: 1. | height:
Type the height property name, followed by a colon (:), in the CSS declaration block.
| 2. | 300px;
Type a value for the element's height, which can be any of the following:
A length value A percentage, which sets the height proportional to the parent element's height auto, which uses a calculated height determined by the browser however much space the element needs to display all the content.
| 3. | overflow: auto;
If you set the height of an element where the content might be larger than the space provided, you will want to specify what happens to the overflow (extra content). For more details, see "Setting Where the Overflow Content Goes" in Chapter 8.
|
 Tips
You can resize an image (GIF, PNG, or JPEG) using the width and height properties, thus overriding the width and height set in the image tag. Doing this will more than likely create a severely distorted image, but that can sometimes be a pretty neat effect. Use width and height to keep form fields and buttons a consistent size. If you are setting the height of an element and forcing a scroll bar, be careful not to let that element be too close to the browser window's scroll bar, since this generally leads to confusion and an unpleasant experience for viewers.
Setting Maximum and Minimum Width and Height Although not implemented in Internet Explorer 6 or earlier, other modern browsers, including Firefox, Safari, Opera, and now Internet Explorer 7, have all implemented the CSS2 ability to set a minimum and maximum width and height for an element (Table 6.11). This can be unbelievably useful for creating flexible designs that will never stretch to unreasonable proportions on larger screens. The max-height and min-height properties work very much the same, but are dependent on the content being displayed, rather than the dimensions of the browser window. Table 6.11. Max/Min-Width and Max/Min-Height ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE7, FF1, S1, O4, CSS2 | <percentage> | IE7, FF1, S1, O5, CSS2 | auto | IE7, FF1, S1, O5, CSS2 |
In this example (Figures 6.14, 6.15, 6.16 and 6.17), the max/min width and height have been set for the copy layer (see Code 6.10 on the next page). Although the area will resize its width with browser windows up to 700 pixels wide, it does not change the height for the window dimensions. Figure 6.14. At 1000 pixels wide, there is space for 344 pixels between the edge of the copy area and the right edge of the window. 
Figure 6.15. Resizing the window to 800 pixels wide does not affect the copy area. 
Figure 6.16. Resizing the window to 600 pixels wide compresses the copy area to accommodate, at least up to a point. 
Figure 6.17. The copy area will not reduce its width below 500 pixels, as shown when the window's width is reduced to 450 pixels wide. 
Code 6.10. The max-width, max-height, min-width, and min-height properties can be used together to allow a flexible design that does not get out of control.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CSS, DHTML & Ajax | Setting the Max and Min Width and Height of an Element</title> <style type="text/css" media="screen"> <!-- body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } h1, h2 { color: #999; } h2 { clear: both; } img { display: block; } form { max-width: 756px; padding: 1em 0em; margin: 4px 0px; border-bottom: 1px solid #666; } input.formText { border: 1px solid #999; background-color: #ccc; } input.formButton { border: 1px solid #999; background-color: #ccc; color: #333; } #navigation { margin-right: 8px; background-color: #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation a:hover { border-top: 3px solid #999; color: red; background-color: #fff; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #copy { max-width: 756px; max-height: 300px; min-width: 500px; min-height: 100px; overflow: auto; border: 3px solid red; } #copy p { margin: 1em 5em; } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 236px; padding: 6px; border: 1px solid #f66; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } --></style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT ⇒ </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER II <span >The Pool of Tears</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice07a.gif" height="236" width="200" alt="Alice" /> Alice is drowning in a pool of her own making. </div> <p>'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English); 'now I'm opening out like the largest telescope that ever was! Good-bye, feet!'...</p></div> </body> </html>
|
To set the maximum and minimum width: 1. | max-width: 756px;
max-height: 300px;
Type the max-width and/or max-height property name, a colon (:), and an appropriate width or height value. The element will never grow wider than this value, regardless of the browser window width.
| 2. | min-width: 500px;
min-height: 100px;
Type the min-width and/or min-height property name, a colon (:), and an appropriate width or height value. The element will never shrink to less than this value, regardless of the browser window width. However, min-height will not resize with the window.
|
Tips Obviously, you don't have to include both the minimum and maximum values. If you set the width of the body tag to less than the max-width of an element, the max-width property is ignored, since the body never stretches wide enough. Generally, the max-height will act like the height attribute and the min-height is ignored since, unlike the max/min width, the element will not resize with the browser window.
|
