[resolved] Twenty Ten Theme: post and sidebar height won't match (7 posts)

  1. jmek
    Posted 4 years ago #

    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.

  2. esmi
    Forum Moderator
    Posted 4 years ago #

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

  3. jmek
    Posted 4 years ago #

    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?


  4. esmi
    Forum Moderator
    Posted 4 years ago #

    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.

  5. jmek
    Posted 4 years ago #

    That did it! Thank you so much.

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

  6. jmek
    Posted 4 years ago #

    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.

  7. esmi
    Forum Moderator
    Posted 4 years ago #

    Glad to hear that you got it sorted. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic