1

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.

Justin Hollender
  • 363
  • 1
  • 3
  • 10

4 Answers4

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.

Sandwich
  • 2,304
  • 3
  • 24
  • 30
  • I can't get this solution to work perfectly. The issue is that the floating left nav and the content div are dynamic. So, the content needs to match the height of the left nav at minimum. If there is more data in the content div, it should expand for that. Take a look at http://csslayout.commercev3.com/ to see what I mean. – Justin Hollender Dec 29 '10 at 18:16
  • I have fixed this by changing the attribute of #content to min-height opposed to height, this change has not yet been reflected in the linked fiddle. – Sandwich Dec 29 '10 at 20:08
  • Ok, the fiddle is up to date and exemplifies this change. – Sandwich Dec 29 '10 at 21:11
  • Having another issue...if the content div is has more content than the floating left nav, it breaks out past the main layout. Any ideas? http://jsfiddle.net/gaHSL/32/ – Justin Hollender Dec 30 '10 at 17:18
  • Please speciy what you mean by 'it breaks out past the main layout' ... are you implying that you want the nav to be the same height as the content if the content is larger than the nav? – Sandwich Dec 30 '10 at 18:13
  • If you look at the fiddle I linked, you can see the content below the rest of the layout. I need the content div to match the height of the left nav at minumum, but also expand past that if there is more data in the content div. The left nav doesn't need to match the height of the content. – Justin Hollender Dec 30 '10 at 18:26
  • One moment, something isn't right here :) .. I"ll post a fiddle update – Sandwich Dec 30 '10 at 18:31
  • http://jsfiddle.net/DSKVR/gaHSL/40/ ... #content had a height:50px assignment that was mucking things up. Works great now :) ... Everything sweet? – Sandwich Dec 30 '10 at 18:34
0

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?

JakeParis
  • 11,056
  • 3
  • 42
  • 65
  • This is a terrible answer since it's pretty much wrong. He said it was DYNAMIC so you can't delete static values. I'd vote your answer down but... I don't care. – Kludge Dec 29 '10 at 00:00
  • If you don't explicitly declare a height, no matter how many menu items are in the box, the box will automatically adjust accordingly. I'm not sure what you're refering to with "delete static values". – JakeParis Dec 29 '10 at 00:03
0

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...).

Kludge
  • 161
  • 6
  • This is not a good answer. I would vote it down, but I don't even want to waste a point of rep on it. – JakeParis Dec 28 '10 at 23:53
  • @JMC Actually it's an excellent answer and it addresses horrible problems with ivory tower anti-intellectuals that don't care about programmers. Most of all it tells them exactly what to do. You just hate my freedom. – Kludge Dec 28 '10 at 23:55
0

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.

JakeParis
  • 11,056
  • 3
  • 42
  • 65