Equal height columns with Thematic

ThemeShaper Forums » Thematic

[closed]

Equal height columns with Thematic

(13 posts)

Started 4 years ago by BrightBold
Latest reply from bluejpro
This topic is resolved

Tags:

BrightBold
Member

This is my first WordPress theme so forgive me if I'm missing something. I want to put different backgrounds on the content and sidebar, so I need to columns to appear equal heights. I was surprised that there doesn't seem to be a container for the sidebar that holds both the "primary" and "secondary" main-aside divs and thus no way to style them together as a single block.

It seems that the best solution for my current situation is to use the faux columns technique, which will effectively solve my problem. But I'm curious about what appears to be the lack of a sidebar container in WordPress. Is this something that can be added to a theme (and if so, Ian, have you considered it?), or is it just not in WordPress and so has to be worked around?

(Or if I'm totally off-base and there's a better solution to my problem, I'd love to hear that too!)

Kelley

Posted 4 years ago #
Ian Stewart
Key Master

Faux Columns are probably your best bet.

A containing div around the two sidebars … maybe. I don't know. I'd have to think about it. ;)

Posted 4 years ago #
BrightBold
Member

Thanks - faux columns is working well so far. I will post a link in the examples thread when I get a little further along.

Posted 4 years ago #
BrightBold
Member

Aah, but it sounds like you're saying a containing div is possible, so it could be done (even if you didn't want to be the one to do it)?

Posted 4 years ago #
Ian Stewart
Key Master

Sort of. I'm thinking about it.

Posted 4 years ago #
him
Member

sorry to bother you both, Ian and Brightbold...

I'm having the same problem. I want the main and side column in different colors but the side column gets short while the main column runs down and breaks the neat right-left color division. Also im not much of a CSS geek, so could u help me - what do i need to change? where do i change?

thanks already,
him

Posted 4 years ago #
lindathep
Member

Hi,
I wonder if there is a solution for the equal heights of the div's" thematic_sidebar" and "container".
In other words, I have the same question as BrightBold who started this topic.

Tnx!

Posted 3 years ago #
Chris
Moderator

Hi,

this blog entry should help: Equal Height Columns with jQuery.

Chris

Posted 3 years ago #
lindathep
Member

Hi Chris,
Thanks for your answer but I am still struggling with the code. This thread was helpful > http://themeshaper.com/forums/topic/vertical-divider-between-p2-and-p3-recent-posts but is still unsolved.
I tried your solution (script in function) etc. because I want div's container and primary to have the same length.
At this point I don't know where I have to hook/add the function to. thematic_content() doesn't seem to work.
This is what I used:

//script equal heights
function equalheight_script() { ?>
<script type="text/javascript">
jQuery.noConflict();
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = jQuery(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
jQuery(document).ready(function() {
equalHeight($("#content"));
equalHeight($("#primary"));
});
</script>
<?php }
add_action('thematic_content','equalheight_script');

Your help is much appreciated!

Posted 3 years ago #

Chris
Moderator

Hi,

sorry .. took me a while to figure out the window load thing ..

function my_scripts() { ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(window).load(function() {
        equalHeight(jQuery("#content,#primary"));
    });
    </script>

<?php }
add_action('wp_head','my_scripts');

But it still doesn't work reliable. The calculated height is a bit weird.

Chris

Posted 3 years ago #

lindathep
Member

Hi Chris, sorry for this late answer and thanks for your solution.
One remark, using
"jQuery(window).load(function() {
equalHeight(jQuery("#content,#primary"));"
didn't do the trick, the site didn't load at all.

I replaced it with
"jQuery(document).ready(function() {
equalHeight(jQuery("#content,#primary"));"
and that works excellent!

Thanks so much.

Posted 3 years ago #
bluejpro
Member

Thanks for posting this

I am desperately trying to get #content and #primary to have same height also. Not working in current Thematic - any help?

Posted 1 year ago #

bluejpro
Member

Oh my that was easier to solve than I thought.

In my case using #secondary instead of #primary created equal height columns and allows a background image behind #page to extend all the way to the footer:

function my_scripts() { ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
	equalHeight(jQuery("#content,#secondary"));
    });
    </script>

<?php }
add_action('wp_head','my_scripts');

This solves the problem of the background image looking cut off on pages where the sidebar is longer than the content area.

Thank you Chris the Moderator and lindathep for posting this function.

(it's awesome)

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.