Page 1 of 1

Sidebar Height

Posted: Sat Jan 29, 2011 5:18 pm
by mtnmchgrl
I have a basic 2 column layout (header, 2 columns w/ sidebar & content, footer)

How do you set the sidebar to be the same height as the content if the content is adjustable by content?

I want my sidebar color (which is different from content color) to reach the bottom of the content (where it meets the header).

I don't know how to do this other than specifying a height in the CSS, which is not the best way to do this I'm sure.

Thanks!

Re: Sidebar Height

Posted: Sat Jan 29, 2011 5:59 pm
by M@rtijn
I'd use the Faux Columns method: http://www.alistapart.com/articles/fauxcolumns/

Re: Sidebar Height

Posted: Sat Jan 29, 2011 6:13 pm
by Wishbone
I've also done some javascript trickery to check the height of the content and adjust the sidebar accordingly.

Re: Sidebar Height

Posted: Sat Jan 29, 2011 7:04 pm
by mtnmchgrl
I'll try the faux columns idea. That might be a little easier :)

Re: Sidebar Height

Posted: Sat Jan 29, 2011 8:45 pm
by Dr.CSS
The easiest way is to use an image repeat-y...

Re: Sidebar Height

Posted: Sun Jan 30, 2011 1:08 pm
by M@rtijn
Dr.CSS wrote:The easiest way is to use an image repeat-y...
That's the whole idea of the Faux Columns technique ;D

Re: Sidebar Height

Posted: Sun Jan 30, 2011 4:21 pm
by Dr.CSS
::) DUH, guess I could have read that before speaking...

Re: Sidebar Height

Posted: Thu Feb 03, 2011 2:06 am
by mtnmchgrl
Hey guys,

I ended up finding 2 really good tutorials for this! I thought I'd share:
http://css-tricks.com/fluid-width-equal-height-columns/

[url]http://matthewjamestaylor.com/blog/ulti ... widths[url]

I actually ended up scrapping all the templates I was playing with, built a totally new layout in HTML/CSS & then uploaded it that way. I think I'm learning better doing it that way than trying to modify someone else's template.

Many thanks for all your help! ;)