Help:Wiki University HTML-- Width and Height

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

WIDTH

Height-width.png

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:

  • The width is set at 400 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.


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.

  • The width is set at 50%
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.

HEIGHT

The height can be set with the attribute coding:

height:200px

  • NOTICE you cannot use percentages

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 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:

<div style="width:400px; height:200px; border:1px solid red">Lorem ipsum ...</div>

TRY THESE OUT . . . . .

Tests.gif
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.


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

Navigation menu