Question

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

+--------------------+
| |   |   header     |
|-|   |--------------|
| |nav|   content    |
| |   |              |
| |   |              |
| |   |              |
| footer             |
+--------------------+

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.

Answer 1

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.