Be Excellent To Each Other

Yo, I'm fiddling with my pants website, mrdictionary.net! I've got tons of content but I've not linked it up because I don't like updating my website.

I've decided to waste some time and see what I can do if I wire up some CSS instead of using tables.

At the moment, the whole website is in a big table:



This layout lets me put stuff in the corners of the screen nicely, and everything is great and good.

However, I've tried remaking a similar layout in CSS and I can't figure out how to get the footer to do what I want.

If I make a table that has a width and a height of 100%, then it will always try and fill the browser window. If I give the cell above the footer cell a height of 100% and the footer cell a specific pixel height and not allow it to be crushed, then the footer will stay at the bottom of the screen if the main cell isn't big enough to fill the screen, otherwise it will be pushed down.

I can't figure out how to replicate this behaviour in CSS.

With the following layout, the footer div will always be below the elements above it in the flow (as long as no absolute stuff is mucking it up).



If I tell the content div height: 100%, then the content div takes up the whole window and the footer sticks off the bottom causing scrollbars to appear.

Am I supposed to put both the content and footer divs inside a 'page' div with width and height 100%, and somehow tell the footer div to be at the bottom of that? I can't figure out how to tell the footer div how to do that. (As I remember, 'absolute' means to the entire browser layout, 'relative' means to the flow position it would have, 'fixed' means to the browser window always (which would be good if I wanted it 'stuck' to the browser edge at all times.)

Who here is CSS enough to master this challenge?

Also, if anybody can figure out a cool new layout for my website, based on the kind of placeholder stuff it has now (in the categories, but feel free to change or remove the categories completely), that would be grand.

Yup.





Sorry if that's not what you're asking, my head isn't working too well at the moment.

[edit]Wait, wait, wait. That's not what you wanted to know, is it? Let me mock something up quick.

Footers are a fucking ballache in CSS. Hopefully someone's found an easy way round it by now but I remember struggling for ages to get one to stick to the bottom of the browser window. 100% height never seems to mean what you might imagine.

Here you go: http://www.fullonrobotchubby.co.uk/random/css_stuff.htm
Works in IE and Firefox.

CSS:

I'm sure they'll be a nice Mac user who'll take a quick look in Safari for you, too.

Safari, so goody.

(looks fine)

Yep, looks ok in Safari.

Looks fine in all my browsers.

Not sure he wants the main content in an overflow:auto div though. I read that he wants the footer to stay at the bottom and the content window fill the screen BUT if there's too much content for one screen, to push the footer down as it normally would be.

I'll have a play around.

Oh right - no worries:

If the content doesn't fill the page though will the footer still be at the bottom?

Yes.

In IE?

Oh yeah, duh
You need this code:

Stupid IE.

I like using this: http://code.google.com/p/ie7-js/

Thanks for the advice Grim..., but that's still not what I'm looking for.

What you're doing there is sticking a div at a percentage down the screen, which then implies that the rest of the layout is percentage based, meaning I can't start the content div at a pixel location (to space it away from my logo).

I can't find any good code that allows a div to fill the 'the rest of the containing block', which would allow me to create a pair of stacked divs, the top with the content in, and the other one filling the remaining space with the footer text at the bottom.*

Basically, I'm trying to find one or both of the following abilities:
- Make a div fill remaining vertical space within a containing block. (An ability I've heard that CSS does not have.)
- Make a div have a size based on a percentage save a specific pixel amount, so I can say 'fill the screen except the 20px footer'. (An ability that I'm certain CSS does not have.)

A table could do either of these things in a snap if I put one inside 'contentsectioncontainer'. *taps foot*

Here's the prototype (You will ignore my mixed up no-stylesheets-yet-inline-styles mash.)

*Hilariously, this example for getting bottom aligned text in a div isn't working on that prototype if I edit it for the 'footerlegal' div: it just explodes, with the text lying around somewhere 200pixels below the box.

(Also, on Firefox 2.0.0.16, your layout shows a scrollbar at the side, which it really ought not to do if you've got the vertical percentages adding up to 100% and the centre pane scrolling. Right?)

The final website will be nothing like that, but I want to see if I can create it with no tables.

Here you go MrD:

http://developer.yahoo.com/yui/grids/builder/

It'll build any damn display you want.

Except one where the footer lies at the bottom of the screen unless it's forced to move by a larger piece of content.

Now you see it, now it's down there.

Plus... that thing requires a yahooapis access every time you hit the page? Or are you supposed to download their stylesheet or what?

A visit to the local CSS evangelist has provided me with this information. Supery dooper!

I dunno. I just select the options down the left hand side and click 'show code'

Thought it might help you out.

My tip for CSS is to colour code all your divs until you're done testing. Then it helps you realise that you're making changes to the correct div, rather than the one nested within it by mistake.

Oooh -- good find!


I used to build and maintain my pages with notepad -- something that CSS makes eminently possible -- but it still took a lot of motivation to dive in add content, because it never stops being at least a little bit fiddly (not even when using SHTML to hide everything that isn't the article). Using Nvu/Kompozer with your home-brew layout or switching wholesale over to Wordpress (or some such) is probably worth considering if you want the process to actually be pleasurable.

That's well handy, cheers

Why would you need to do that? Can't you just use a margin on the div holding your logo to get the space you want?


Yeah it does - use a negative number for the south margin.*


Right, except using borders and such pushes it above 100%.

[edit]*I should read the rest of the posts first

Can't you use min-height on the content cell?

Edit: Ah, yes, I see the problem. Using negative margin hacks is probably the nicest solution until CSS3 comes along with its god-send of a calc function.

Are you still struggling with this MrD? Your two examples looked identical in opera to me. Post up your workings so far again if you like.

I'm guessing you've got a mega biggo screen. Try looking at footer2 now that I've put more crap in it.

The sticky footer thing is exactly what I was hoping for.



Nah, it's not a problem with technology, it's a problem with motivation. Completely gutting the site is an excuse to not sit down and put any new content up. The guts of the site are fine, I just can't be bothered to do aught with it. It's stuff like that Xbox softmod guide I link to every time somebody mentions the Xbox.

Isn't standards compliant though CSS class selectors can't contain underscores

Or at least, they couldn't last time I checked. Knowing my luck the CSS spec changed three days ago or something.

Nope, can't find anything about that. I've missed a semicolon from the .holder's 'height', though.

Cool stuff, ta! I'll have to bookmark that for when the next client asks for it. Nice light-weight solution, that.

Bah, they changed it between CSS 2 and CSS 2.1. The gits.

MrD - saw this and thought of you.

http://www.cssplay.co.uk/layouts/layout
I know it's a bit late, and you've probably sorted this now, but if not then it'll maybe be useful for someone searching for the same solution in the coming months and years.