<< .. Go to : : Home : : Exercise 5 : : Demo 5A : : Demo 5B : : Demo 5C : : Demo 5D : : All Class Demos .. >>

Exercise 5 Demo: Part C : Using A Div for Containment

Part Two: The Same Page of Content - Contained

The Content Contained within a Div id'd and Styled as Container or Wrapper

Go to Part One of Using Divs for Containing (Demo 5B)

This page is Part Two of two. On this page the content will fit in a set width and be centered in the browser window no matter how wide you open it. Try stretching your browser window open wide, then make it narrow. The margin on the right and left will be set to automatically be the same width. I like to think of it as automagically becoming the same because you set their width to auto. For this page I used mostly the same content as page one - I added a bunch of images as space filler and random text about the images.

To view the coding for this page: Open in FireFox, RightClick on page and Choose - View Page Source

To make this page be contained I used the div tag. I added the opening DIV tag right after the opening body tag on my HTML page. The opening tag has an id. It looks like this:

<div id="wrapper">

I closed the div right before the closing body tag near the very bottom of my HTML page.

Inside my document styles I added CSS styling for the id. I set a width and gave margin information so my page will center.

#wrapper {width: 800px; margin: 0 auto 0 auto; }

This works to center the page on most browsers, except old versions of Internet Explorer.

By using the DIV tag and styles to contain the content, Part Two has structure, and will look a little more settled in place.

a picture of habaneros This is a picture of habaneros I took. Such pretty orange colors. I had to buy a pound of them for a recipe. The people at the check stand were amazed I bought so many. The next day I picked up the knife that was used to cut them up and it still had oil from the habanero on it. Ow-- it was hot! succulant image

The succulant and flower pictures I took at the San Diego Fair in the Garden section. I like to walk through them and think about how elaborate these used to be when I was a kid. Now this section is very small and the Fair has become a bit like a swapmeet. How things change.

flowers flower

I do love taking pictures of flowers. I have some in my garden. Not as many as I would like. The bunnies in my yard like them too- but they prefer them for munching. They are very cute but there are way too many of them. We could call our street bunny lane.


This dog came to the brewery with his owner. I call visiting dogs, "Dognitaries". Its pretty funny and people seem to like that. They have been asking me to start a Dognitary Wall of Fame to post all the dog pictures I have taken over the years.


These chilies and cinnamon were at Northgate Market. They have a great selection on chilies to choose from. The habaneros were from one as well.