Help:Wiki University Wikitext--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.
 * Set the width to a certain number of pixels.
 * Set the width as a percentage.

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. 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.
 * 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 use pixels for the height coding, percentages will not work in height.
 * NOTICE that the container is much higher 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 ...

Effect of borders on width

 * When a border is added to an element such as a div tag, the area of the div tag if it is called out will remain. If a container is 640 pixels wide and a 50 pixel border is added, the whole element will expand to 740 pixels and expand into the right sidebars.  So if you are adding thick borders, you need to assess how it will affect the width of the entire element.  Here's a sample:

Try these out


 Exercises In your sandbox put the lorem ipsum in a div tag container with your choice of border and 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 >>