Please help me get my content div to get an auto height from absolutely positioned element

I need some help with a CSS layout. It is set up like this:

+--------------------+
| |   |   header     |
|-|   |--------------|
| |nav|   content    |
| |   |              |
| |   |              |
| |   |              |
| footer             |
+------------开发者_如何学C--------+

So, the nav is supposed to be floating above all the main page content. That's why I have it set to be absolutely positioned. The issue is that the nav items are dynamic, without a set height. Right now, the nav expands past the content. How can I fix it so that the content will have an auto height based off the nav?

Thanks in advance.

Take a look at http://csslayout.commercev3.com/ to see what I have so far. The issue is also that the floating left nav and the content div are dynamic. So, the content div needs to match the left nav at minimum and expand for it's own content too.

---

Sounds like you might need to use jQuery, you could do something like this.

$(function(){
  var headerHeight = $('#header').height();
  var navHeight = $('#nav').height();
  var contentHeight = navHeight - headerHeight;
  $('#content').css('minHeight',contentHeight);
}) 

Here is a working fiddle and our conclusive fiddle

I suggest this because I am presently implementing a similar solution. Otherwise without javascript/jQuery, I am fairly positive it is not possible to determine sibling relationship to an absolutely positioned element using pure CSS.

---

Assuming you have an explicit height set on the nav menu, take that away and all should be well (works in this fiddle). If not, could you paste the code in?

---

You would need to make your floating div relative to your navigation div since you can't use variables in CSS (another reason why WC3 sucks, they never give us what we want they only tell us what we need and they are always wrong. I hate you so much WC3...).

---

Based on your example page, it seems that you don't really need the position: absolute;. Set the nav box to float: left and change the html so it is inside the #content div. Yu may need to take away the explicit height of the #content div.