Sidebar Height

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
mtnmchgrl
Forum Members
Forum Members
Posts: 32
Joined: Sat Jan 29, 2011 3:50 pm

Sidebar Height

Post 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!
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm

Re: Sidebar Height

Post by M@rtijn »

I'd use the Faux Columns method: http://www.alistapart.com/articles/fauxcolumns/
Make your community a better place!
Wishbone
Power Poster
Power Poster
Posts: 1368
Joined: Tue Dec 23, 2008 8:39 pm

Re: Sidebar Height

Post by Wishbone »

I've also done some javascript trickery to check the height of the content and adjust the sidebar accordingly.
mtnmchgrl
Forum Members
Forum Members
Posts: 32
Joined: Sat Jan 29, 2011 3:50 pm

Re: Sidebar Height

Post by mtnmchgrl »

I'll try the faux columns idea. That might be a little easier :)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Sidebar Height

Post by Dr.CSS »

The easiest way is to use an image repeat-y...
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm

Re: Sidebar Height

Post 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
Make your community a better place!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Sidebar Height

Post by Dr.CSS »

::) DUH, guess I could have read that before speaking...
mtnmchgrl
Forum Members
Forum Members
Posts: 32
Joined: Sat Jan 29, 2011 3:50 pm

Re: Sidebar Height

Post 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! ;)
Post Reply

Return to “Layout and Design (CSS & HTML)”