Make the child div as tall as the parent div with auto height

Question

I have a wrapper element that contains two floating elements: contentArea and sidebar. contentArea has the most content and therefore determines the height of the wrapper element. I want the sidebar to touch the bottom edge of the div wrapper. How to do it. This is the basic layout of a Wordpress blog.

HTML:

<div id="wrapper" class="clearfix"> <div id="content"> GROWS REALLY TALL AS HAS SO MUCH CONTENT GROWS REALLY TALL AS HAS SO MUCH CONTENT GROWS REALLY TALL AS HAS SO MUCH CONTENT GROWS REALLY TALL AS HAS SO MUCH CONTENT GROWS REALLY TALL AS HAS SO MUCH CONTENT </div> <div id="sidebar"> WANT TO BE AS TALL AS CONTENT. height:100%; /* doesn't work */ </div> </div> 

CSS

 #wrapper{ height:auto; width:100%; } #content{ height:auto; width:625px; } #sidebar{ height:100%; width:335px; } 

Appreciate all the help.

thanks

Answer 1

Is that what you are looking for?