CSS Basic Assistance!

Hi all,

I have a basic question regarding this website:

http://www.peakhurstgardencentre.com.au/?page_id=5

I was wondering how to (using CSS) make the background of the sidebar extend 100% down the page (as you can see the sidebar right stop 2 cms from the bottom and leaves a white area just below:

Garden hints and tips section on the right!

I can extend via using text or <br> in the html but that aint as clean.

Should I use something like this: background-repeat: repeat-y;

This is the current CSS below:

#sidebar {
        background: #DEE3A6;
	float: right;
	width: 230px;
	margin: 0px;
	padding: 10px 0px 20px 0px;
	line-height: 20px;
	display: inline;

Code (markup):

Hope someone can help me

 

Anyone know?

Or perhaps I didnt explain it properly...please let me know if what I am saying doesnt make sense lol

 

It makes sense. Search for faux columns is the best advice I can give you. background-repeat is for images, what you need is for the two columns (content and sidebar) to be the same length. You might be able to set the height of the sidebar to 100% but I didn't look over the layout in enough detail to state that with certainty. If there is a div defined that contains only the left content area and the sidebar, height: 100% should work.

 

Yup, There are two different divs for the left content and right sidebar.

So just enter this?

height: 100%; into the css?

 

There has to be 3 divs. Left content, right sidebar and one holding both of those. The height:100% is applied to the sidebar css.

 

I tried applying to just the sidebar css but to no avail.

It seems like such a common problem and people are asking it in google search results but the answer is varied and doesnt seem to work

 

Unlike tables div's do not automaticly expand with the rest of the page and will only go as far down as the content within them.

You could just add a couple of blank returns under the text to push it down, or set that column to be a minimum height. ie min-height: 500px

 

The permanent solution for this problem would be to have a thin background image running across the body center in Y axis. Else there will always be min-height problem with IE. However if you would like to use min-height for it then do it like this: