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

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?

jeannine

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 (https://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.

Glad to hear that you got it sorted. ??