[Pro] 3 column flexible height

I’ve got a 3 column layout with a footer at the bottom. I want the 3 columns to grow or shrink in height to fit the contents, but I want the 3 columns to always be the same height after they have adjusted themselves. I also want the footer to move up or down as necessary so that it is just below the 3 columns.

This is all easily understood if you just look at my website: http://www.truckingwisdom.com

Pulling my hair out!!! Thanks in advance for any help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is trivially easy if your page is fixed-width, slightly less so
if your page is flexible-width.

For fixed width, what you want to do is what Dan Cedarholm calls “faux
columns”. Make a tiling background image (vertical only) that is 25px
tall and page-width wide, containing color blocks or textures where
your columns need to be. Apply that background to the outer container
of your page, then use nested inline HTML boxes within that outer
container to create your columns. Float all three columns left, or two
left and one right, or some other combination as you see fit. After
you add some content to these columns, turn off their height attribute
so they may flex. Finally, add your footer, set to clear both so it
stays out of the way of your columns. If you add a solid background
color to the footer, it will hide the stripes of the faux columns.

Walter

On Sep 12, 2011, at 5:35 AM, Trucking Wisdom wrote:

I’ve got a 3 column layout with a footer at the bottom. I want the 3
columns to grow or shrink in height to fit the contents,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter! By the way, check these out:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

http://www.thechoppr.com/2009/02/08/3-column-fluid-layout-100-height/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow! This is so ridiculously hard to do. There must be 5 trillion websites out there designed exactly like mine, but Freeway doesn’t support it! (To be fair, none of the other website designing softwares support it either.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry you’re having trouble with it. I just did one from scratch, in
less time than it took me to explain it.

http://scripty.walterdavisstudio.com/three-columns

download the file here:

http://scripty.walterdavisstudio.com/three-columns/three-columns.freeway.zip

I left the image I used for the background on the pasteboard, above
the page, so you could see how it’s made. There’s not a whole lot to
this method, and it’s very hard for a browser to screw up. Most of the
other methods rely on you knowing which column is the longest, and
setting that first or last in the source order – I agree, they’re
kinda nutty that way. Dan’s technique is considered the go-to way to
construct this sort of page, because it’s so hard to break.

Walter

On Sep 12, 2011, at 5:27 PM, Trucking Wisdom wrote:

Wow! This is so ridiculously hard to do. There must be 5 trillion
websites out there designed exactly like mine, but Freeway doesn’t
support it! (To be fair, none of the other website designing
softwares support it either.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options