I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
Hi Sridhar,
Good stuff, thanks for publishing! I have a long-term client who loves those vertical lines (which drive me nuts!). Over time I’ve also used jQuery tricks, or CSS hacks, and now what I like to use now is an elegant CSS hack, the “One True Layout” in this article, which is very smooth, and no math at all. 😉 http://css-tricks.com/fluid-width-equal-height-columns/
This fixed the bleed-over issue for me but I was still getting the sidebar widgets to load funny. (The last widget would only partially show.) To fix this I added the functions code from this tutorial into the footer by way of Genesis/Theme-Settings..
Hello Sridhar,
Thank you very much for your time and expertise to answer my question. I am volunteering for this project when the stakeholders asked me if we can add divider between columns. I tried a few tricks but didn’t work for me so I had to ask the SP members.
I actually added your solution it worked like a charm. The only issue I see is that the vertical line is dependent on the content in the column. To get equal vertical lines, the columns have to have contents that are the same heights. If not it looks odd. Any thoughts on this? Take a look at your work now oromia.turaimages.com
Thanks Sridhar!! That worked for border but I thought it would be also make the sidebar the same length of content. I have now a border from top to bottom but sidebar stop when content ends.
Is it supposed to work that way? Thanks again!!
Awesome! it is fixed. Thank you so much Sridhar. I will keep in touch you, we might need your service in the future.
The URL is http://www.wpparatodos.es Now you can’t see the border because I haver deleted the CSS but it works right! Maybe I’m looking for another thing, all I want is the sidebar to go all the way till the content ends no matter what content it has. Does it make any sense?
This seems to be a great solution for me, but I’ve run into a problem. I’ve got a page with a longer Gravity Form, so the content should be longer than the sidebar. However, the js appears to be ignoring the form as part of the content and setting the height of the page at the height of the sidebar, which means the form is overflowing into the footer widget area. I can’t use the CSS method due to some other styling. Have you encountered this?
I just changed to Genesis News Pro from another theme. I want the sidebar to come on right on homepage, but on left on all other pages. Also I want the sidebar background color as red on all pages. Please suggest how I can do this. My website is http://kolkatamusing.com/.
Hi Sridhar,
Good stuff, thanks for publishing! I have a long-term client who loves those vertical lines (which drive me nuts!). Over time I’ve also used jQuery tricks, or CSS hacks, and now what I like to use now is an elegant CSS hack, the “One True Layout” in this article, which is very smooth, and no math at all. 😉 http://css-tricks.com/fluid-width-equal-height-columns/
Then I just vanish the borders at smaller sizes.
Namaste, Dave
Awesome. I was not aware of this.
All it takes is just
.content-sidebar-wrap {
overflow: hidden;
}
.content-sidebar-wrap .content, .content-sidebar-wrap .sidebar {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Thank you.
This fixed the bleed-over issue for me but I was still getting the sidebar widgets to load funny. (The last widget would only partially show.) To fix this I added the functions code from this tutorial into the footer by way of Genesis/Theme-Settings..
Correction…The functions code can’t be added to the footer. It shows up under the footer. https://www.dropbox.com/s/k7jpkcbaqzphpzl/Screenshot%202016-03-24%2013.20.32.png?dl=0
More soon. Code still seems to work though
Can you provide the URL of your page where the problem can be seen?
Hello Sridhar,
Thank you very much for your time and expertise to answer my question. I am volunteering for this project when the stakeholders asked me if we can add divider between columns. I tried a few tricks but didn’t work for me so I had to ask the SP members.
I actually added your solution it worked like a charm. The only issue I see is that the vertical line is dependent on the content in the column. To get equal vertical lines, the columns have to have contents that are the same heights. If not it looks odd. Any thoughts on this? Take a look at your work now oromia.turaimages.com
Have you done steps 1 and 2?
Hello Sridhar,
Thanks for this article. I have just one question, if I want to use it for content-sidebar, what do I need to add to step 1?
See https://gist.github.com/srikat/7888764
Thanks Sridhar!! That worked for border but I thought it would be also make the sidebar the same length of content. I have now a border from top to bottom but sidebar stop when content ends.
Is it supposed to work that way? Thanks again!!
Can you provide the URL of your site?
I am seeing similar problem with my site. the far right border stops with content. Here is the url http://oromia.turaimages.com
Thanks
Tura
Add the CSS mentioned here: http://www.sridharkatakam.com/adding-vertical-separator-lines-content-sidebars-magazine-pro/#comment-1329
Awesome! it is fixed. Thank you so much Sridhar. I will keep in touch you, we might need your service in the future.
The URL is http://www.wpparatodos.es Now you can’t see the border because I haver deleted the CSS but it works right! Maybe I’m looking for another thing, all I want is the sidebar to go all the way till the content ends no matter what content it has. Does it make any sense?
@Pepa
Add the CSS mentioned here: http://www.sridharkatakam.com/adding-vertical-separator-lines-content-sidebars-magazine-pro/#comment-1329
Yes!!!!! Thanks!!!
This seems to be a great solution for me, but I’ve run into a problem. I’ve got a page with a longer Gravity Form, so the content should be longer than the sidebar. However, the js appears to be ignoring the form as part of the content and setting the height of the page at the height of the sidebar, which means the form is overflowing into the footer widget area. I can’t use the CSS method due to some other styling. Have you encountered this?
Can you provide the URL of page/site in question?
I used your contact form to send it to you as it is a client site under development–hope that is all right. Thank you!
Try this js: https://gist.github.com/d895765600e0a6eb563d
I think that’s done it. Brilliant. Thank you!
[…] http://www.sridharkatakam.com/adding-vertical-separator-lines-content-sidebars-magazine-pro/ […]
Sridhar,
I just changed to Genesis News Pro from another theme. I want the sidebar to come on right on homepage, but on left on all other pages. Also I want the sidebar background color as red on all pages. Please suggest how I can do this. My website is http://kolkatamusing.com/.
Thanks in advance.
Partha
Sridhar,
I enjoy this post a lot – I cannot seem to get your line to show up on my parallax pro theme. Is there something I am missing here?