Comments on: CSS Faux Columns

By: Leandro

Leandro — Tue, 20 Sep 2011 14:11:48 +0000

Thank You

html, body {
height: 100%;
overflow-y:auto ;
}

By: Dave

Dave — Mon, 16 Nov 2009 14:12:52 +0000

The only reason I don’t use display: table; just yet is that you still have to use faux columns for IE7 and below so you end up having to create different code for different browsers.

I always prefer to create one solution that works for all browsers so that it’s easier to maintain or change in the future.

by all means enhance things with CSS3 or JavaScript but I’d always make sure that the base code works for all browsers in the same way first.

By: Arian Hojat

Arian Hojat — Sun, 15 Nov 2009 22:01:59 +0000

This worked pretty well on one of my sites.
Wondering is there an advantage to just set display: table; on all good browsers and then use height: 100% on bad browsers.
or the min-height/height is better solution?

By: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

Wed, 04 Mar 2009 20:40:24 +0000

[...] CSS Equal Height Columns [...]

By: Piet

Piet — Tue, 21 Oct 2008 14:09:12 +0000

How will i add a footer that doesn’t float under the content?

By: Chris

Chris — Thu, 24 Jul 2008 23:51:12 +0000

Thanks for this! At first I couldn’t figure out why I was getting extra space in FF at the very top of the page – it ended up being a top margin on my header img (which was display: block). Added top padding to the header div and that did the trick.

By: Johan Strömquist

Johan Strömquist — Mon, 07 Jul 2008 13:29:17 +0000

I’ve been working with a classical header / content / footer setup for a web page of one of our clients. After working with the design bits and bobs I realised that rescaling the window in Mozilla made the backgrounds stop rendering when I scrolled below the initial view port.

Reading through your tutorial on 100% height I desperately tried duplicating the code but to no avail.

It wasn’t until following your link to this tip in one of the answers to a comment in that tutorial that I found the answer:
“One last thing you’ll need to do is to clear the float’s so that if the content is longer than the browser window, the background image will continue when you scroll.”

I’ve been working quite a long time with CSS but never really come to terms with the finer aspects of floating and positioning. By applying the ‘clear’-method to ‘:after’ everything works, but… I have no idea why?

What do the different parameters actually do and why does my content suddenly flow just the way I want it?

Thanks for solving my problem and for some excellent tutorials, and if you could actually provide me with an answer I might finally understand why my CSS has been haunting me for so long.

By: Jermayn Parker

Jermayn Parker — Wed, 30 Jan 2008 00:12:43 +0000

Yeah it does!
I realised that problem would arise after I wrote what I did!

By: Dave

Dave — Tue, 29 Jan 2008 08:42:38 +0000

Hi Jermayn, unfortunately that wouldn’t really work as each column would only expand in height as much as the content unless you hard coded a larger fixed height but this in itself would present it’s own set of problems.

By using faux columns, you can create backgrounds for various columns and ensure that they “appear” the same height as each other without any complexity involved.

Hope that makes sense.

By: Jermayn Parker

Jermayn Parker — Tue, 29 Jan 2008 05:58:26 +0000

Good tutorial!
My only point I disagree is that for a simple background like you have used for an example, you could just use css settings to change the background and place a border around them.

BUT for complex backgrounds, you would use this method.

Enjoying these tuts man!