Posted by limaeasy on March 15, 2011 at 2:01am
I would like to stretch the sidebar first and sidebar second to 100 % (with css height 100%) evenly until the next region (in my case the footer) to apply background images (level). According to my (limited) experience I understand that the height has to be applied to the container/s itself (.sidebar-first-region and .sidebar-second-region) and also the parent container. Even by looking at the page with Firebug I got lost.
I would appreciate any suggestions to what div’s I have to apply the height / or other solution…
TNX
Comments
Couple of options
Potentially the "most" popular option would be using Faux Sidebars. This would be taking a background image, and putting a background image on the container for the sidebars and main content that fakes the look of the sidebars extending all the way down. This article (http://line25.com/articles/create-sidebars-of-equal-height-with-faux-col...) is pretty good in explaining what Faux Sidebars and how they can be done.
Another way would be something like http://www.cssnewbie.com/equal-height-columns-with-jquery/ to use jQuery to determine which columns are the tallest, then making all the columns the same height. It IS a decent option, and there are TONS of jQuery methods, I've used a few myself, but tend to usually use the faux sidebars now when I'm dealing with a client site.
The issue with Faux Sidebars though is that in Omega... we have the flexibility to change the width of a sidebar quite easily, and the faux sidebar method would then need a new background image if that sidebar was made wider or narrower...
couple of options to think on... I'd love to hear some other options.
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs
jQuery looks like the solution
The solution using the Faux Sidebars would be quick and easy, but as mentioned at the price of loosing the flexibility with Omega. Solving this with “jQuery” seems to be more appropriate and I’ll give it a try.
Thanks’ for the quick reply! Great work with Omega :-)
Flexible option..
You are right about the flexibility, and as Roger mentions below, about the feature in AT... I have that actually in the issue queue as a feature on the todo list, and it will use a jQuery option. More to come on that soon... :)
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs
Dunno if this helps any...
Before I learned about Omega and started using it for my sites development, I had used the AdaptiveTheme framework. There was an option in the theme settings there under Layout Settings for Equal Heights. Under that were checkboxes that allowed you to apply equal height settings to a variety of theme elements.
I don't know whether they were using JQuery or something else to accomplish this. But someone smarter than me (OK... don't say it. I know... A looong list) could probably figure it out.
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
AdaptiveTheme framework
You’re right about the option to set the equal heights in the AdaptiveTheme framework. I tried the theme but made my choice on Omega, as there are features I need to accomplish a rebuild of a site and implementing it in Drupal.
side bar stretching 100%
You could also use absolute and relatively positioned div's.
The outside container div has relative positioning and there are two internal divs which hold the columns. The left hand column will expand to hold the content and the right hand column, which is position: absolute will resize accordingly, via the settings in the CSS.
The right hand div is effectively attached to the containing div by setting the top, right and bottom edges, eg :
top: 10px;
right: 10px;
bottom: 10px;
See this article on 24 ways that walks you through it. ( http://24ways.org/2008/absolute-columns )
this helped me so much
Dude, thanks for posting this. I've been looking for a css fix for a while now... it's always the hardest problems solve that have the answers just hiding right there in front of you... Thanks again