Vertically Centering Text in Resizable Div

[Rubella]

Hey guys

So I'm a total noob at this and my teacher wants us to create a liquid website.

I have a main area for content and I want the text in it to be centered vertically. I also need to make sure that there's a lot of space above and below so that the content background takes up a good proportion of the screen, even on larger monitors.

Here's how I want it to look:

http://i206.photobucket.com/albums/bb231/xXxRubella666xXx/Website_wide.jpg

http://www.gilad91.limewebs.com/

Basically, I want to lessen that big gray gap. I'm trying to avoid using any measurement other than percentage.

Thanks in advance and any help is appreciated.

[abduraooft]

May not be a foolproof one, thoug you may begin with the following.

#text {

min-height: 50%;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 25%;
padding-top: 25%;
position: relative;
vertical-align: middle;
width: 45%;
}

[Rubella]

Thank you! I've done it.

I wanted to avoid having to scroll down but it seems like there's no way to have everything.

Thanks a lot for the padding, though. ^_^

[abduraooft]

You may fine tune it by reducing the padding and min-height values.

[Excavator]

Hello Rubella,
You can lessen that space so you don't have to scroll, just change your percentages.
Try this maybe -

#content {
width: 87%;
margin: 0 0 0 5%;
padding: 10% 0 10% 3%;
background-image: url(images/fan_repeat.png);
background-color: #e6e6e6;
background-repeat: no-repeat;
background-position: right center;
background-attachment: scroll;
position: relative;
}
#text {width: 45%;}


Some vertical centering methods here (http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/index.html), one might even work for you...