zen sidebar and content issue
I am having a problem with the zen theme. The side bars on my site stop after a certain height. If the content on a particular page is longer than the content in the sidebars the sidebars stop while the main content continues down the page. I have tried setting the height of the side bar to auto with hopes that would automatically adjust the height of the sidebars to the height of the main content, unfortunately that didn't work. I also tried changing the colors around to make it appear that the sidebars extent the full length of the page, that also failed. I currently have a minimum height set. If I set the min-height to correct this problem on one page, it leaves a huge amount of white space on smaller pages.
I am open for suggestions and would greatly appreciate any and all help with this issue.
Thanks
sidebars extent
Hi,
You have to set the background color of parent div of content. For this you have to make an image for sidebar and the width should be equal. Repeat this in parent div of content with position according to sidebar left or sidebar right.
Content area
. main {
background:url(images/image.jpg) repeat-y left;
}
. sidebar-left {
float:left;
width:30%;
}
. sidebar-right {
float:left;
width:30%;
}
. content {
float:left;
width:60%;
}
Thanks
the best way
Is this really the best way to do it? Considering that there's both left-sidebar and left-sidebar-inner divs I would think there was a css only option that avoided using an image or javascript. Alas this css only option has been eluding me, and I'm about to resort to an image.
Any other suggestions?
Thanks.
this topic has been discussed
this topic has been discussed heavily with regards to CSS. Check out this post for pretty much all the alternatives to achieving this effect.
http://www.ejeliot.com/blog/61
My Solution
I was experiencing the exact same problem today. After banging my head against the wall trying to understand the "Faux Columns" stuff with containers and background images; the light bulb finally turned on. Here's my solution, but I am a complete beginner, so buyer-beware. There have been no problems in the two hours in which I have done nothing further on the site ;)
To begin, I am using a three-column Zen Starterkit based theme. The header runs all the way across the top, the two-outside columns are fixed, and the middle column is liquid. I wanted a vertically repeating background image running down each sidebar. However, as this thread discusses, the background only went as far as the sidebar and not all the way to the bottom.
Starting with this thread, the link above got me on the whole "faux columns" trick in CSS. I couldn't figure the stuff out. In a desperate, half-baked attempt to apply one of these solutions I tried adding a container to the CSS and page.tpl.php and failed. However, it got me to pull out my page.tpl.php poster (as a complete beginner and a visual learner, I have printed out my page.tpl.php file, taped the 3 pages together, and drawn brackets linking together the div tags and such so I can visually see what is contained in what - I find this tremendously helpful both practically and as a learning tool to understand how everything works together.)
Seeing what containers already existed and the annoying body background burning through, it finally dawned on me to put the sidebar background essentially in the body.
SOLUTION
In my renamed zen.css, I merely did the following.
#page
{
background-image:url('sidebarleft.png');
background-repeat:repeat-y;
background-position:top left
}
#page-inner
{
background-image:url('sidebarright.png');
background-repeat:repeat-y;
background-position:top right
}
Then you just need to set background values for the header, footer, etc. to cover up the ends of the bars if you don't want them.