[octavia]

I decided to create my own web site from scratch that way I could also learn. I know a bit of HTML but I'm fairly new to CSS so I really screwed up the code cause I don't know what I'm doing. So basically I used a textured background image instead of a one-color background. Then I used a lighter area where the content should be.

I'm trying to set the size of each page (tapestry-like background) based on the size of the content box, and leave a space on the bottom over the dark image so I can add more info like contact, etc.

For instance, page1 has more text than page2. So page1 will be scrollable and page2 won't. See graphic:

img363.imageshack.us/img363/8263/contntxm1.jpg

Can I add a property to the css code to make the size of the page larger or smaller based on the size of the content box?

body 
{
background-image:
url('graphics/background.gif')
}


.navl{
position:absolute;
background:#f1eeda;

left: 15%;
top:7%;
width: 910px;
bottom:7%;
height: 700px;
right: 15%;
}

[pagey]

Hi there,

you don't actually need to give your content area any height specification. It will stretch as required depending on the content within it.

So you just need to specify width properties etc.

(Might be an idea to set the 'min-height' property of the document to 101% to stop the scrollbars disappearing (and the page jumping) in Firefox.

[octavia]

Thank you pagey. The problem is that the content area goes all the way down to the bottom:

img112.imageshack.us/img112/5089/borderswl5.jpg

But if I remove 'height: 700px;', the lighter area decreases in size.

Originally Posted by pagey

Hi there,

you don't actually need to give your content area any height specification. It will stretch as required depending on the content within it.

So you just need to specify width properties etc.

(Might be an idea to set the 'min-height' property of the document to 101% to stop the scrollbars disappearing (and the page jumping) in Firefox.