expanding divisions in HTML

I'm working on a HTML page where i have two divisions left and middle inside a wrap division. the middle division contains the content and the left is a navigation menu. The problem is my middle division gets expanding since it contains the text, i wanted to make the navigation height equal to that of the middle.

the html page is as follows,

<div id ="wrap">
<div id="left">
##naviga开发者_如何学编程tions menu
</div>
<div id="middle">
##content
</div>
</div>

My CSS is as follows,

#wrap{
color: #000; 
background: #fff; 
margin: 0px auto 0;
width:800px;
}   
#leftnav{
float:left;
width:181px;
min-height:600px;
padding:10px;
margin-left:11px;
background-color:#CCC;
}
#middle {
float:left;
width:538px;
min-height:580px;
padding:20px;
margin-left:10px;
}

can anyone help in with this issue ?

See if Faux Columns will fill your need.

There is no magical solution to do that. CSS has nothing to adjust the height of an element according to the height of another, completely independent element.

You can still use workarounds, but be aware that all those workarounds are evil.

• Use table layouts. Yes, that sucks, but it gives you the expected result.
• Adjust the height with JavaScript when the document is ready. Of course you have to take in account that some of your users will not have JavaScript enabled.
• Change your design. For example, if your left side panel has a black background and is 200px width, you can set a black 200px border to your middle division, filling the remaining space, and floatleft your left side panel to hover the border.

You can also try to play with parent <div/>s. For example, if you need a border to your left side panel, filling the whole height of the page, you may set a border to the parent <div/> and a left border to your middle division element.