html - How to increase div height to match the height of next div? -

i want page header , menu , content areas.

this code.

html:

<div class="header">title</div> <div class="menu">     <ul>         <li>option 1</li>         <li>second option</li>     </ul> </div> <div class="content">     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1>     <h1>asduahsd asdasd asid daksh</h1> </div> 

css

.header {     background-color: yellow;     padding: 10px; }  .menu {     background-color: blue;     float: left;     width: 20%; }  .content {     background-color: red;     float: left;     width: 80%; } 

http://jsfiddle.net/x1q03qfk/

as can see in jsfiddle, .menu shorter .content, want take same height of .content.

if replace float:left display: table-cell works want avoid solution.

i tried position: absolute on .menu , top:0, bottom:0 no luck.

thanks in advance!

when dom loads set height of menu same content:

here example using jquery:

$(".menu").height($(".content").height()); 

here example using native js:

var contentheight = document.getelementsbyclassname("content")[0].clientheight; document.getelementsbyclassname("menu")[0].style.height = contentheight+"px";