What's the best way to force a div to extend to the bottom of a page?

Hmmm… I typed up a big thing and then realized the whole thing is fluid. Fluid designs are one of those noble undertakings that rarely work out without a lot of thought and testing. Line lengths get too long or short, especially in multi-column designs and it tends to quickly become a mess of fringe cases. You may want to put some limits on the max and min width of the whole thing, but that’s a whole new can of browser support fun.

Enough “If I were you…”, on to answer your question, I like this technique fairly well if you can have a footer with a specified height – http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

The gist is that you have a clearing div that pushes content to the bottom (clear: both), then a negative margin to pull the footer back up. So if you have enough content to fill the window vertically it will just appear at the bottom of that. If not then it appears at the bottom of the browser window.

Also, if you have no need of a footer, it can be a few pixels of background color and it should still force your containing div to go full height.

I hope it helps and have fun.

I’m getting a not found on your first link; have you taken it down? I’m not quite sure whether or not you’re trying to attach a footer to the bottom of the viewport, or just extend the white section so that it runs the length of the page.

Why not just take something like this image and tile it vertically? If you want to retain the pattern in the background, you could work this into a transparent PNG in a container div, rendered over the body.

If you get that original file back up, I can modify it to show you what I mean.

Alternatively, if you’re wanting to stick the footer to the base of the viewport, there’s a good way to do that and I’d be happy to modify your example to show you how that would work.

Let me know!

It depends on what you want to do. Shoot me a PM or something and we can discuss this.

@richardhenry
How do you make it a variable width layout if you repeat-y (or whatever) the background image vertically?

@lefteh
I think the only way to do what you want is to use a table for your layout.

@phoenyx Oh crumbs, I missed that. Well, the tutorial linked to ^^^ looks helpful.

Link changed to http://aklyptic.com/groundzero/crc/index.php – sorry.
I would repeat-y an image like that, but as phoenyx said, that’d prevent a variable width layout. Maybe I’ll just have to use a table.

As a note, resizing the browser window causes wrapping within some of the navigation items (screenshot). It might be worth shrinking down the size of the nav controls and instead making them part of a navigation bar?

Or perhaps considering an elastic layout?