Help:Wiki University HTML-- Width and Height





<< Previous Chapter Next Chapter >>

WIDTH
Using either paragraph or div tags you are able to control the width on the page. If you wanted the text to only go part way across the page you could do it two different ways. Here is the attribute coding:  width: 400px   (for pixels) width: 50%   (in percentages) Here is our lorem ipsum paragraph with these two attributes with a border to see the examples more clearly: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. ''PLEASE NOTE! If there is a border, the width of the text is to the INSIDE edge of the border. This is if the border is very thick.'' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * Set the width to a certain number of pixels.
 * Set the width as a percentage.
 * The width is set at 400 pixels
 * The width is set at 50%

HEIGHT
The height can be set with the attribute coding:  height: 200px Here is our lorem ipsum with a height of 300 pixels: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * NOTICE you cannot use percentages
 * NOTICE that the container is longer than necessary.
 * NOTICE that the text is at the top of the container.

WIDTH AND HEIGHT USED TOGETHER
Here is lorem ipsum in a div tag with a width of 400 pixels and a height of 200 pixels: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding:  Lorem ipsum ...

TRY THESE OUT . . . ..


 Exercises In your sandbox put the lorem ipsum in a div tag container with a width of 200 pixels and a height of 400 pixels. Check your answers

 Quick Quiz
 * You can't use both width and height in a div tag
 * A. True
 * B. False


 * You can't use both width and height in a paragraph tag
 * A. True
 * B. False


 * You can use percentages in height attributes
 * A. True
 * B. False

Check your answers

<< Previous Chapter Next Chapter >>