Frumph.NET

#page-wrap {} / #page-wide-wrap {}

These elements are a wrap around to #page and #page-wide. By default they do not actually contain anything inside it.

However there are some cool things you can do with it, your #page and #page-wide contain the static width of either 780px or 980px and say you want to extend the outside of that area by a few pixels and put something around the outside this is what you would use.

For example:

#page-wide-wrap {
       padding: 0px 10px;
       background: #ccc;
}

This will make it so that there is a 10px outline on the left and right of the static width #page-wide area. You can put a background there if you like, some people have put a background that repeat-y’s down the side of the #page-wide like a drop shadow or some funkey design.

[member]

Companion / Child Theme Tip

The following is taken from the comicpress-boxed child theme, what this does is add 10px to both the left and right side of your #page and #page-wide and the graphics from that child theme are a shadow which make the page look like it’s raised above the background.

#page-wrap {
	padding: 0 10px;
	background: url('images/classic-background-narrow.png') top center repeat-y;
}

#page-wide-wrap {
	padding: 0 10px;
	background: url('images/classic-background-wide.png') top center repeat-y;
}

[/member]