How do I set wrapper div size to include what it contains?

Hello all.
Take a look at this picture and code. I am trying to get #wrapper2's box element (blue) to be as tall as the longest of the two elements it contains. (green and yellow). Sorry if this is not a clear question. I am doing this so that #wrapper2 can have a y-tiled background image.



--CSS--

body {
	font-size: 10px;
}

#wrapper1 {
	width: 770px;
	margin: 0 auto;
	position: relative;
	border-style: solid;
	border-color: red;
	border-width: 5;
}


#wrapper2 {
	position: relative;
	border-style: solid;
	border-color: blue;
	border-width: 3;
}


#header {	
	height: 30px;
	border-style: solid;
	border-color: purple;
	border-width: 3;
}


#content {
	float: left;
	width: 580px;
	border-style: solid;
	border-color: green;
	border-width: 3;
}


#sidebar {
	float: left;
	width: 160px;
	border-style: solid;
	border-color: yellow;
	border-width: 3;	
}


#footer {
	clear: both;
	height: 30px;
	border-style: solid;
	border-color: orange;
	border-width: 3;
}

Code (markup):

--HTML--

<div id="wrapper1">
<?php get_header(); ?>

<div id="wrapper2">


	<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

			<div class="post" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>

				<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

	</div>

<?php get_sidebar(); ?>


</div>
<?php get_footer(); ?>
</div>

Code (markup):

 

<div id="wrapper2">
    <div id="content"> ... </div>
    <div id="sidebar"> ... </div>
    <!-- you have to clear floats here -->
</div>

HTML:

 

Thank You! That worked like a charm