Width

Read through page 303. To set the width of an element you can use px, percents, or ems. This is set with the use of the width property:

p{

width: 100%;

}

Min-width

Read through page 304. The min width sets how small an element can become. By default block level elements are 100% wide, and can be shrunk to as small as the browser window will go. Setting a min width will allow the element to stop shrinking at a certain point. This can be set with pxs, percents or ems.

p{

min-width: 200px;

}

Max-width

Read through page 304. The max width sets how large an element can become. By default block level elements are 100% wide, and will take up the whole browser window. Setting a max width will not allow the element to span further than a specified amount. This can be set with pxs, percents or ems.

p{

max-width: 800px;

}

Image Widths

Images are usually set to a specific width. If you want an image to scale with the browser window set the width to 100%. You can then set the min and max widths to specify how small and large it can get.

img{

width: 100%;

min-width: 300px;

max-width: 800px;

}

Instructions

Practice using min and max widths on boxes and images.

1. Give the image a width of 100%
2. Give the box and the image a max width of 500px
3. Give the box and the image a min width of 100px
4. Click "Full" to go into full screen mode and resize the browser. Notice how the content doesn't go beyond 500px, and also doesn't collapse below 100px.