Jump to content
Sign in to follow this  
anlinares

Primary Sidebar Alignment

Recommended Posts

anlinares

I have almost made it through this site without bothering you all but, alas, I have met a problem I cannot solve!! It's really three minor issues but they all deal with the primary sidebar and feature slider... www.votepattydemos.com 1. I am trying to raise the primary sidebar to meet the bottom of the feature slider. I managed to move the feature navigation on top of the image but can't seem to get rid of that feature footer pad. Need to leave the navigation over the image but get rid of that feature footer spacing. Here is the css I have at the moment: #featurenav {margin-top: -35px;} #boxes {margin-top: -30px;} div.feature-footer-pad {background-color: none; border: none;} 2. I want to right align the primary sidebar so that it matches the right edge of the feature slider. Played around with Firebug but can't seem to find the right tag to make it move. 3. I have set a background image for the primary sidebar and I love it! The problem is that if I have a long post, the background image will not extend past the widgets I have placed in the sidebar. Here is an example page. I want the sidebar to run all the way to the bottom, like it looks on the other pages. http://votepattydemos.com/?p=99 Hopefully I won't have any more questions for y'all.... on this one, anyway. I am so excited to be learning more! You all have taught me so well. I appreciate everyone's help and LOVE Pagelines!!!

Share this post


Link to post
Share on other sites
nataliemac
Hello anilares! I took a look at your site and hopefully these will be solutions for you! 1. The issue here is that there's a bottom section to the feature slider that you're apparently not using that's causing the blank space. You can just hide it with this CSS: #feature-footer .feature-footer-pad { display: none; } That gets rid of all but 2px of space there. You can get ride of that by cleaning up the CSS for the #feature a bit: #feature { margin: 1em 0 0 0; height: 330px; overflow: hidden; } 2. There is a sort of odd shift in the top content - it's all moved 15px to the right. You can get rid of that and align the sidebar with the right edge of the header by making these changes: #feature #feature_slider has a left margin of 15px and it shouldn't. Change that to: #feature #feature_slider { margin-left: 0; } Likewise, your content-pad div inside the #branding section has 15 pixels of left padding that shouldn't be there. Change that to: #branding .content-pad { padding: 25px 0px 25px 0; } 3. This is sort of a perpetual complaint of how HTML and CSS work together - it can be pretty tough to get a column to expand to fill the height of it's parent container. There aren't any great solutions out there that work reliably across all browsers, just different hacks and tricks to get it working. Looking through how the site is set up already, here's the one I think would work most reliably for you, but you'd need to do some testing: #pagelines_content { overflow:hidden; } #sidebar-wrap { padding-bottom:9999px;margin-bottom:-9999px; } Hope that helps!

Share this post


Link to post
Share on other sites
anlinares
Thanks, nataliemac! Almost there! #2 and #3 worked (haven't browser tested but hopefully they're good). I need just a little more on #1.... I had tried that first code for the footer padding earlier but it gets rid of the feature slider navigation all together. But you suggesting it again made me think to do this... and it worked! #feature-footer .feature-footer-pad { margin-top: -40px; background-color: none; border: none; } Now, when I try bringing up the sidebar it appears there is still some spacing under the feature hiding the sidebar. Any clues? Thanks for your help!!

Share this post


Link to post
Share on other sites
kastelic
Hi, have you tried this? [code] #feature { margin-bottom: 0 !important; } [/code]

Share this post


Link to post
Share on other sites
nataliemac
Yay! I'm glad we're getting closer. I was able to close up that gap between the sidebar and the feature with this CSS: #feature { margin: 1em 0 0 0; height: 330px; overflow: hidden; }

Share this post


Link to post
Share on other sites
anlinares
Thanks, Katelic. That did it. Although, I took a look back at the previous advice and her clean-up code for my feature also took care of it! Yes, nataliemac, that worked! Thanks so much!!! You're awesome!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×