Matching 2 divs heights, Match a div height with the height of another div. Options

[JackDeMeyers]

I have this HTML code from my Web Design Class (this is only the snippet I need help with):

CODE

    <!--Start container-->
    <div class="container">


    <div class="container" id="welcome">
    <h1>Welcome to Billy Bob's BBQ!</h1>
    <p class="tab">Here is where you will find all the news regarding Billy Bob's BBQ, including all of our awards surrounding our one of a kind BBQ. Look around this site to check the menu and other information about Billy Bob's.</p>
    </div>
    
    
    <h2>"Meat" the Owner - Dean Johnson</h2>
    <p class="tab">Owner of Billy Bob's, Dean Johnson, grandson of the resturants creator, William 'Billy Bob' Johnson, will be at the Lilac Festival May 15! Come down to Highland Park, Rochester, to see Dean Johnson cook up some ribs and then answer any questions you may have for him (as long as they don't give away our award winning sauce's recipe!). He will be cooking BBQ'ing from 11am-1pm and answering questions from 1pm-2pm.</p><br /><br />
    
    
    <h2>Rochester Lilac Festival</h2>
    <p class="tab">If you are planning on attending the Lilac Festival at Highland Park this year, look for Billy Bob's BBQ! Our world famous BBQ will be located near the information booth and will be serving ribs and brisket, along with cornbread, all day long from May 10 - May 19. The booth will open at 11am daily, so be sure to stop by and watch the magic happen on our slow cooking BBQ pits. Everyday we will be open until close (8:30pm).</p>
    <p><a href="http://www.rochesterevents.com/festivals-events/lilac-festival">Rcchester Lilac Festival</a></p><br /><br />
    
    
    <h2>Billy Bob's Wins Best BBQ Sauce</h2>
    <p class="tab">At the Anual BBQ festival, in Dallas, TX, Billy Bob's was awarded the best BBQ sauce in all of Texas. The original Billy Bob's took its booth and cooked two of its specialties; ribs and brisket. After a long day of munching on some of the best BBQ suaces around, the judges decided Billy Bob's was above all others.</p>
    <p class="tab">After being crowned winners, Billy Bob's BBQ was given a pig shapped trophy which is now being kept inside of the Texas Location, right in the heart of Dallas. The Rochester location is planning to attend the Lilac Festival, from May 10 - May 19, and show off its world famous slow cooked ribs and brisket, along with the award winning sauce.</p><br /><br />
    
    
    </div>
    <!--End container-->
    
    
    <!--Start sidebar-->
    <div class="sidebar">
    <p>Sidebar</p>
    </div>
    <!--End sidebar-->

I need the .sidebar to be the same height as the .container. It cannot be a fixed height as it will be different heights as more news is added.

Here is the CSS I have now (this is only the CSS that applies to .container and .sidebar):

CODE

.container {
    margin-left:8%;
    width:58%;
    background:#FFF;        /*Container BG color*/
}
.container #welcome {
    border:dashed thin #999;
    width:98%;
    margin-left:0;
    margin-bottom:35px;
}
.sidebar {
    margin-right:8%;
    width:22%;
}
.sidebar, .container {
    float:left;
    overflow:hidden;
    padding:1%;
}

How do I match the sidebar's hight with the container's height, while allowing the container's height to expand to the content within it?

HERE is the website --> http://jackdemeyerstest.tk/ Maybe seeing it will help.

This post has been edited by JackDeMeyers: Apr 30 2013, 10:12 PM

[Frederiek]

Have a look here: http://css-discuss.incutio.com/wiki/Any_Column_Longest

[JackDeMeyers]

I figured it out. Thanks You

[Frederiek]

You're welcome.