CSS problems

[savje]

Hi everyone!

Time for my first post here at the scripts :D

Currently working on a homepage for a little project I'm working on. I'm not really a web site-making wizard but since I don't have anyone to do it for me (since it's a one man project), I did it myself and of course the road have been bumpy up to this point. Now I've come to a stand still, I can't solve or find an answer to my problems so I hope you guys can help me!

The page in question

and the problems is:
- the sides of the content don't extend all the way down (I've put "height: 100px;" to them now because otherwise they don't show at all...). Is there a way to have them at the same height as the content?
- There's a big blank space to the right, I guess that it's there because of my way of centering... I've tried other ways of centering which solves the space-problem but they don't center the page...
- The page don't extend down to the bottom of the window if the content is too small.

Would really appreciate if someone could take a minute to help me.

/Savje

[drhowarddrfine]

There are a couple of things you will have to play with to make this right.

You must specify the actual height and width of div for it to expand but there is no content. So the div collapses to the actual size of the background image which is why you don't see it unless you give it that height.

The way to get this div to expand to the full height of the containing div is to say 'height:100%'. The problem ,though, is the browser is going to ask "100% of what?" and the answer is the height of the parent of your border div. However, you don't specify anything there so the browser works its way up the tree and doesn't find anything there either.

So the best thing to do is make sure html and body are both set to the height of the browser viewport:
html,body{
height:100%;
}

Do the same for the parent of your border div and the border itself and..............that doesn't work. Why? Now it gets tricky.

Some of the divs above this are absolutely positioned. Absolute positioning removes the element from the normal flow so any height set there won't affect the children it contains.

And this, my friend, I leave as an exercise to the reader.

[savje]

Thanks for your help!

I've changed the absolute positioned div to relative and set height to 100% of all the parent div and problem solved! :D but a new one arose... :/

The new one..

Now the page extends to much.. do you know how to solve this?

You maybe also know how to solve the other problem, that it extends to the right?

Thank you again!

/savje

[drhowarddrfine]

You have #center set at 50% of the width.