Stretchy Page Design Experiment

The design of the site requires picking an overall approach: stretchy or fixed width, or some hybrid. Making the page stretchy or fixed is straightforward, as long as you include enough enclosing tags to give you the control you want. This experiment is to determine what CSS architecture will work.

This document can be viewed in one of six ways, depending on the stylesheet selected. Play with it and see what happens!

How it works

Within the <body> tag, two <div>s are used: one called margin and one called page. You can use either class or ids to identify these. In this document they are labelled visibly so you can see them, but you (obviously) wouldn't do this. These two elements allow control of the overall stretchi-ness of the page.

Here are the current styles:

#margin {
  width: 100%

}
#page {
  width: 100%;

}

Browsers