#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:

<br />
#page-wide-wrap {<br />
       padding: 0px 10px;<br />
       background: #ccc;<br />
}<br />

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.


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.

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