Problem with <div> tag!

[cusimar9]

I'm trying to behave and use DIV tags and CSS wherever I can... but I've got a particularly annoying problem here

I can't make this outline the height of the page no matter what I try.

Here's the menu:

http://www.santoshighamfarm.co.uk/New/menu.htm

And here's the CSS:

http://www.santoshighamfarm.co.uk/New/style.css

Any ideas please?

This is the CSS for the <div> tag in question:

#menuoutline {
top: 0;
width: 190px;
height: 98%;
border: 1px solid #ccc;
margin: 0px;
}

[tantone]

This is one of the hardest things to do with CSS. The best way that I've found--the site www.alistapart.com has some good articles on this--is to use a background image to get the desired effect.

[cusimar9]

I can't believe it... something so simple

I can't use a background image as it won't look right when the screen is resized

[tantone]

Sure it will. Take a look at the www.alistapart.com site. That right side menu bar background and border is done with a bg image for the page.

[cusimar9]

But surely a background image like that still won't force the div tag to span the height of the page?

[tantone]

It won't force the div tag to span, no. But it will look like it did.

The div tag will be as long as it needs to be to accomodate the data within. If you make your background image look exactly like the bg and border of the div tag, no one will know the difference. Pull up a long article on alistapart. If I hadn't told you, would you have had any clue that the right menu div wasn't extending all the way down?

You may have to play a bit with container divs if you intend to center your content or have multiple layers to work with. But trust me, it works.

Edit:
Another example. Here's (http://www.donnaomar.com/main.shtml) a site I'm working on for someone else. This is done with bg images as well. No matter how long the page becomes, the menu div will appear to have extended all the way to the footer.

[cusimar9]

I see what you're saying :D

I'll have a play. Cheers :t