Month: July 2006

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:

#full_content {
background-image:url(../images/framework/page_bg_tile.jpg);
background-repeat:repeat-y;
margin: 0 auto;
width: 708px;
}

#side_bar {
float:right;
text-align:left;
width: 210px;
}

#main_area {
float:left;
margin: 10px auto;
text-align:left;
width: 670px;
}

Now the div’s to organise your content

<div class=”full_content”>

<div class=”side_bar”>
Sidebar content in here
</div>

<div class=”main_area”>
Main area text
</div>

</div>