Bogdan Pârcălab, personal website

Here is the trick:
<script type="text/javascript" language="javascript">
function allocateSidebarHeight() {
var contentDom = document.getElementById("main");
var sidebarDom = document.getElementById("nav-one");
if((contentDom.offsetHeight - 800) > sidebarDom.offsetHeight) {
sidebarDom.style.height = (contentDom.offsetHeight - 800) + "px"; }
}
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() { this.className = this.className.replace(" over", ""); } } } }
allocateSidebarHeight();
}
window.onload=startList;
</script>

Don’t forget to replace “main” and “nav-one” with your div’s.

Many thanks and reference to: http://www.nimaheydarian.com/2007/01/css-div-100-height-problem-solved/

If you have any troubles (IE/FF bugs, etc) write an e-mail to blog_at_pixiemag_dot_com.

How to have a DIV shrink and enlarge based on its content using CSS? Simple!!!

CSS file:
.autosize {
display: table;
width: 100px;
border: #333333 1px solid;
}
.content {
display: table-cell;
}

XHTML file:
<div class="autosize">
<div class="content">
My content!!! My content!!!
My content!!! My content!!!
</div>
</div>

You can go forward with this.
Good luck!