Jump to content
Sign in to follow this  
thomstark

Equal Height Main Column and Sidebar with PageLines

Recommended Posts

thomstark

Hi. Normally, there's a fairly simple way to achieve equal height columns (the shorter column extends to the height of the taller). 

 

Like adding overflow:hidden to the container div, and then to the two columns: padding-bottom:80000px; margin-bottom: -80000px

 

But I can't get this to work with PL. I'm using one-sidebar-right layout. Is this possible with PL's structure? I want the shorter column to always be the same height as the taller column (and it varies which is which from page to page). 

 

Thanks for any help offered.

Share this post


Link to post
Share on other sites
Danny

HI,

 

How are you creating your columns, in the Sidebar right ?

Can you provide a link to pages where this is happening please, so I can see what you're referring to.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thomstark

No, I mean, making the column-main and sidebar-right equal heights at all times. 

 

If you go here https://worldfest.org/product-category/merch/ and add a couple merch items to your shopping cart, you'll see the right-sidebar expand, increase in height as items are added to your cart. I want column-main to expand with it so there's never any gap on the left side before the footer.

 

Make sense?

Share this post


Link to post
Share on other sites
thomstark

And actually, I'd settle for just making column-main the same height as sidebar-right, if sidebar-right is taller. I'm not worried if column-main is taller than the sidebar.

Share this post


Link to post
Share on other sites
Danny

Unfortunately, I have a little play and I don't think this is possible with CSS to be honest. When searching google, all I could find were js related articles on how to achieve this.

 

JS isn't my forte, but this article may assist you - http://www.mikedoesweb.com/2011/100-height-div-with-2-lines-of-code/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
thomstark

Thanks, Danny. I'll check it out now. Much appreciated.

Share this post


Link to post
Share on other sites
thomstark

This little script here is successfully making sidebar and main content column the same height:

 

<script type="text/javascript">
var h = document.getElementById("sidebar-wrap").offsetHeight;
document.getElementById("column-wrap").style.height = h + "px";
  </script>

 

However! (I'm ever-so-complicated.) Since I actually have the margin-top of the sidebar offset by a couple hundred pixels, it's still not having the desired effect. So now I'll be trying to figure out a way to get the main column to compensate. Thanks, Danny! You got me what should be the solution, except for the other problem I've created for myself. :)

Share this post


Link to post
Share on other sites
Danny

hehe, well happy that the issue is resolved to a degree.

I have marked the topic as resolved.


Please search our forums, before posting!

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  

×