Container-001 Title

Hopefully you viewed the Panel with “set width” prior to this one, but it's not that important.

All "Containers" in this Panel have a width that is dynamic (set by percentages) so the width of most components ( Containers, Titles, and Main Menu items ) will expand and shrink to suit the width of whatever you have your Panel width set to in Opera. I generally allow for around 200px, but whatever suits you. There is of course a minimum width before some lines will wrap. This could be controlled by min-width: in the CSS but I haven't bothered with it.

Most elements that had a left and right margin of auto in the Panel with “set width” have been changed to half of the remaining width of the elements width. EG: The menu-item1 has a width of 60% so margin: 4px 20% 8px; gives them a top margin of 4px, a bottom margin of 8px and the left and right get 20% each.
60% + 20% + 20% = 100%. - simple. This makes the items align in the center of the page.

If you view this template as a full window then resize Opera, or sling out the Panel (left or right), you'll see the page expand/contract to fill out whatever width you change to.

In reality, the only thing that needs to be changed from the Panel with “set width” is the width and margin of div.content1 because I really don't think the Menu items and Titles would need to be dynamic, but that is entirely determined by whatever you want.

NB: The Menu Item's CSS for the link is display: block so if the length of text in the link were to exceed the given width of the menu-item1 then you'll get an ugly result but that is easily changed. Just remove display: block but you will have to change/tweak/add to the existing CSS to pretty it up. Also note that menu-item2 would be affected too.

That's it - the rest of the containers below are an exact copy of the Panel with “set width”, the only thing changing is the width of the content and titles.

The entire markup of this page (within the BODY) is identical to the Panel with “set width”, bar this container. The changes to layout are all made via the CSS.

Container-002 Title

This is a dummy paragraph with a height set to 250px to simulate content.

It's height is set in the class gutz1 in the CSS. Just remove the height attribute altogether to get it to fill as needed, or give it a height of auto, or change the value to whatever suits.

This is a another dummy paragraph with a height set to 250px to simulate content. So you can see that content is spread accordinly.

Container-003 Title

This is a dummy paragraph with no set height so it inherits values set for standard paragraphs in the CSS. ( the class gutz1 is not added to the paragraph tag. )

Meaning, it has no set height and the container will just keep growing vertically to accomodate the content.

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

.... and so on .....

Container-004 Title

This is a dummy paragraph with a height set to 250px but the content exceeds the set height.

It has a classname of gutz2, which has all the values of gutz1 except that
overflow: auto has been added to create a scrollbar once the set height has been exceeded.

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Container-005 Title

The link below is internal and references another container. Linked to by its id.

Container-002

The link below is external and references another page/site that will load up outside this panel. [ 'target="_blank"' ].

OzTroll (my website) :D

NB: target is somewhat deprecated and is not valid in XHTML STRICT for example.

Container-006 Title

This is a dummy paragraph with a height set to 250px to simulate content.

I think most aspects of this template have been covered so the remaining Containers are just spacefill. :)

A general knowledge of HTML & CSS is all that's needed to tweak and change this template to your hearts content.

Container-007 Title

This is a dummy paragraph with a height set to 250px to simulate content.

Container-008 Title

This is a dummy paragraph with a height set to 250px to simulate content.

Container-009 Title

This is a dummy paragraph with a height set to 250px to simulate content.

Container-010 Title

This is a dummy paragraph with a height set to 250px to simulate content.