Parent div to match tallest child div's height?

Question

I'm making a website with a "page" div, and inside that contains the left div "navigation" and the right div "content". I want to make the height of the "page" div (so the background matches) equal to the height of the tallest div, either "navigation" or "content".

How would I go about doing this?

Answer 1

write like this

html:

<div class="page">
 <div class="navigation"></div>
 <div class="content"></div>
</div>

css:

page{overflow:hidden}
.navigation, content{float:left}

Answer 2

I'm guessing you're floating the other divs, otherwise this would always be the case. You can either float the parent div as well, or add a <div style='clear: both'></div> just before the end of the parent div. Either of these techniques will cause the parent div to be as big as its children.

EDIT: whoops, missed the end tag :)

Answer 3

This will help you

HTML

<div class="page">
  <div class="navigation">i am navigation</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maiores, ex? Mollitia assumenda veniam aliquid commodi ex, libero in quia perspiciatis sint voluptatibus soluta exercitationem quas quos repudiandae deserunt obcaecati.</div>
</div>

CSS

 .page {
  background-color: #000;
 }
 /* for clearfix*/
.page:after{
    content: "";
    display: table;
    clear: both;   
 }
 /* for clearfix end*/

 .navigation,.content {
   float: left;
 }
 .navigation {
   width: 20%;
   background-color: #cd6a51;
 }
 .content {
   width: 80%;
   background-color: #4CAF50;
 }