Support » Themes and Templates » [Resolved] Twenty Ten Theme: post and sidebar height won't match

[Resolved] Twenty Ten Theme: post and sidebar height won't match

  • I am building a child theme for Twenty Ten (www.webswords.com) and cannot get the container div to balance its height with the height of the primary sidebar div. I want a pale gray background throughout the container and primary sidebar divs, but if I put even two widgets (search, calendar) in the sidebar next to a shorter post, the bottom of the second widget sticks out of the background area. I guess I could always make sure I have enough content to balance the sidebar, but I’d rather solve it with CSS or the page template.

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi


    Forum Moderator

    You will need to wrap the content container and the primary sidebar in the same container and add your background to this enclosing container.

    Thanks Esmi, that got me part of the way there. I added a div of inner-wrapper that surrounds both container and sidebar:

    get_header(); ?>
    	<div id="inner-wrapper">
    		<div id="container">
    			<div id="content" role="main">
    			</div><!-- #content -->
    		</div><!-- #container -->
                    <?php get_sidebar(); ?>
             </div><!--#inner-wrapper -->
    <?php get_footer(); ?>

    The new inner-wrapper div shows up in View Page Source and Firebug. But I can’t seem to style it. I have added the following in my child stylesheet, to no effect.

    #inner-wrapper {
    	background: #CC0000;
    	border: #CC0000;

    Am I missing something?




    Forum Moderator

    Now try adding:

    #inner-wrapper:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;

    That should force the inner-wrapper to extend to the height of the longest inner block.

    That did it! Thank you so much.

    Now I need to go learn more about the :after pseudo-class. Forgot all about that sucker.

    One last word: searching for info about :after led me to an old article about clearing floats (http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/). Turns out that all I needed to add to the inner-wrapper markup was a simple “overflow:auto”. Even works in the relatively recent flavors of IE.

    Now I have two new tools.



    Forum Moderator

    Glad to hear that you got it sorted. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Twenty Ten Theme: post and sidebar height won't match’ is closed to new replies.