This example is originally based off of the ‘Flexible CSS Teaser Box’ by 456 Bereastreet.
I have modified it to use four different corner images and four expandable side images.
The site’s frame can stretch indefinitely vertically and horizontally whereas the original had width restrictions of 1600 pixels. I do agree, however, that most cases 1600 pixels wide would be overkill.
One of the first things I needed to figure out is how to have the sidebar colour or pattern stretch to line up with the length of the content. I’ve found the best way to do this is to initially create a background image showing a segment of the width of your site like this: (This image would repeat vertically, with the white bit as my content area and the coloured bit on the right as my sidebar)
Then set up your sidebar and content area within the y-axis repeating background div. This way, the content will stretch down and cause the background to repeat, forcing the sidebar colour to also extend.
See below for a quick code example:
First, the CSS to show the bg image and the content areas:
The following code will completly center your page.
top: 50%; /* positioned absolutely 50% from the top */
width: 100%; /* 100% wide */
height: 1px; /* nominal height of 1px */
overflow: visible; /* overflow is set to ‘visible’ */
font-family: Verdana, Geneva, Arial, sans-serif;
margin-left: -125px; /* negative margin that is exactly half of its width */
top: -35px; /* negative top position that is exactly half of its height */
left: 50%; /* positioned absolutely 50% from the left */
This is the centered box