Easy CSS question - height of a DIV

heh all,
I'm trying to design a website that has a centered container box with a header, content and footer.
Problem is - I want the footer to go to the bottom of the screen regardless of resolution. I tried putting the container at 100% but nothing working yet? Any other way of doing it other than setting height to 600px etc?
Thanks

#wrapper {
    text-align: left;
    margin: 0px auto;
    width: 850px;
    height: 100%;
    background: pink;
}

Code (markup):

 

margin-top: 100%; might work.

 

Nope, tried it. Thanks anyway.

Anyone else?

 

Before you worry about the footer, have you figured out how to center the site no matter the resolution or amount of content?

http://pmob.co.uk/pob/vertical-center1.htm

For the footer:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

 

heh rochow,
thanks for that.
I've found a website that illustrates what I want:
http://www.mccabebuilders.com/education01.html

Do you see the red box/div as a footer - no matter what page is viewed, it always reaches the bottom. How could I set an overall container to just fill the page pls?

 

That link worked a treat, thanks m8

 

What you are looking for is called a 100% min-height page model... IE6/earlier have no min-height, but treat height as such so that too is easy to work around.

There is a 'issue' in declaring % heights in CSS - if the parent container has no size declared on it, by the specification % heights are changed to auto... Thankfully all browsers treat 100% height on HTML and/or BODY as 'special cases'...

Because of this, you can go:

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
}

#container {
	min-height:100%;
}

* html #container {
	/* lte IE6 lacks min-height, but will treat height as such */
	height:100%;
}

Code (markup):

To get your #container to always be at minimum the height of the browser window, but expand larger if need be.

The method I suggest for fixing the footer in place is to make the footer a fixed height, put it after #container (NOT INSIDE) and then use a negative top margin to ride it up. Just be sure to pad the bottom of your content and/or columns to make room for the footer.

Have a look at my 100% min-height examples linked to in this page about three column layouts to see this method in action:

http://battletech.hopto.org/html_tutorials/3coldiv/template.html

though they seem to not work in Opera 9.5... odd, was fine in 9.27

as to centering - do you mean on the horizontal or the vertical - vertical requires some chicanery and is only possible in a DIV/CSS layout if the item you are centering is a fixed height (and therin fixed content and a miserable /FAIL/ for accessability). This may be one of the rare cases where a table is superior in terms of achieving the desired layout.

 

The link above apparently centers vertically, no matter the amount of content (http://pmob.co.uk/pob/vertical-center1.htm) Not that I've tried it, I used a fixed height with an overflow:auto div for scrollbars on longer pages (love those nutcase clients)

 

By using display:table and table-cell, along with conditionals to use bugs in the IE box model - at which point use a table, it would be less code and be less hacks. We can't use the table tag, so we'll just make stuff that's not table behave like it is - RIGHT.

CC for IE specific CSS, inlined CC's for MORE conditionaled IE CSS, all of which gets sent to all browsers to even work in the first place?

/FAIL/

Great example of what's possible, but not a great example for implementation. (that the CSS in main.css is saddled with multiple redundant declarations because it's a bunch of shit code copy/pasta'd together just makes it a bigger /FAIL/)

 

Well, yes. Semantically, the thing isn't a table. So should we mark it up as a table just to get some visual setting for it? Ideally, we should be able to make anything do anything visually while the markup remains semantic (never mind that we're not quite there yet, but that's the goal, right?). While redoing a tabled site, I ended up with a menu that needed to accordion and change height-by-content like the table it once was. But, it's not a table, it's a menu, so I marked it as such. display: table has many problems (why are the borders always collapsed???? grrr) but the only thing keeping me from using it regularly is IE's lack of support for it (menu just looks slightly more retarded in those browsers then... oh well).

Paul's older code can almost always be reduced in size. He keeps saying he'll get around to rewriting them (and re-testing them in more modern browsers) but I doubt he'll ever get the time. Too busy helping 'tards like me with CSS : )

 

Heh guys, thanks for the replies.
I've found a website that illustrates EXACTLY what I'm looking for.... The container looks a similar size to what I'm working off (800px). Anyway, if you look at this in a 1280 x 1024 res and resize your resolution to 1024 x 768 - you will see the red div/box/container WHATEVER it is at the bottom isn't there anymore?
This is exactly what I'm after..... thanks in advance
Leo

 

Uh, Leo... post the url you found?

 

hahah lol whoops, sorry!!
http://www.mccabebuilders.com/

 

Oh, man... you like the effect, but don't look at the code, it's atrocious. An abomination unto Gawd.

Likely it's the table... I saw deathshadow do this once with the sides of someone site... this guy had a strange design where there was the center content which looked like paintings hanging on a wall, with a small painting or something on each side... if you had a small screen resolution, you simply didn't see the side paintings, and if you had a decent screen rez you did. It was something funky done with side td's... don't rememer where that thread is nor the name of the original poster.

Anyway, you still want what deathshadow posted-- a 100% height model sets the body to 100% height, and you can pull the footer up over the bottom of the longest content OR the bottom of the page-- whichever is longer. If the screen is small or the content is pretty long, the footer's not seen at the bottom until the user scrolls down-- the best compromise.

McCabe builders is I think using their table for that, but you don't need it in that situation. That page could be made really nice code-wise, and 100% height model would do it wonderfully and easily.

Man that code is nasty.

 

"An abomination unto Gawd." hahah classic

Had a look for d.s. post but can't find it.... any code for me stomme?

 

Post # 7 here.

You could also google "100% height model" css

You don't have to center the content the way Paul does to keep the footer at the bottom. Just, 100% height model on the page, keep the footer as a direct child of the body (not inside the min-height container), give it a height, then pull it up over the bottom of the #container using a top negative margin equal to or larger than the footer's height. Which is also in ds' post, along with a template of his.

 

Ok excellent, I'll give it a go and see what happens - I'm looking for that exact effect though on mccabe bu. I ciphered through the code and you're right, its terrible.....

 

Stomme_poes still can't get it dude, sorry for inconvenience - need sample code, that code on the link I provided is rubbish.....

 

Ah, if you want I can just copy their site, in valid code using the 100% height model, and then you'll have some code to start with for adapting to what you want. It's a pretty easy setup but I sure used my first 100% height page as a model until I knew it from scratch, too.

I'll post it here, maybe just a wire-diagram of McCabe or something.

 

Excellent, thanks again.