dillonbrannick
dillonbrannick

Reputation: 322

css min-width and min-height not working

I'm redesigning my website, and at the moment I'm just blacking out the layout. I have a class that centres everything:

.centre
{
position:absolute;
left:50%;
top:50%;
}

everything is then offset using a margin.

I have a wrapper that gives the min-height and min-width

#wrapper {
position:relative;
left:0px;
top:0px;
min-height:600px;
min-width:600px;
}

The min-width and min-height both do their job but for some reason after this wrapper is applied the website is no longer centered vertically. You can see the website here: http://testerwebby.tumblr.com/

I'm wondering what's the cause of this, and what's the solution.
Thanks,
Dillon Brannick.

Upvotes: 1

Views: 3431

Answers (1)

Phil Rykoff
Phil Rykoff

Reputation: 12087

Your problem is that your page's body does not fill the whole browser window vertically. You can check this by using Firebug and hovering your body element - not the whole browser window will get a blue hue.

Try to fix this with the following CSS:

html, body
{
    height: 100%;
}

Upvotes: 1

Related Questions