CSS - Auto height of an element containing absolute positioned children? - css

Question

on the site I am currently developing I have a <nav> element containing a 2 leveled <ul>, I am absolute positioning the sub list (nav ul li ul) to the right of the main list.
The problem I am having is when the sub list is longer (taller) than the main list, due to the sub list being absolutely positioned, the element is not stretching to accommodate it. See the below image for an example of what I mean.
My HTML is as follows:
<nav>
<ul>
<li>List 1</li>
<li>
List 1
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
</ul>
</nav><!-- /nav -->
Any idea of a solution to this? Ideally I would like to keep it as a nested list for semantic reasons.
Thanks!
UPDATE:
Please see the following jsFiddle for a working example - http://jsfiddle.net/TcYBQ/

Answer 1

You can't satisfy all your constraints at the same time:
The parent element must have the correct height.
No JavaScript.
In the HTML, "List 2" must be inside "List 1".
To have the correct height on the parent, you can't use absolute positioning on "List 2". Unfortunately, there's then no other way to move "List 2" to where it should be.
Pick from these:
Use JavaScript to set the height and keep the semantic HTML.
Move "List 2" out of "List 1" and avoid JavaScript but sacrifice the semantic HTML.
I'd try to avoid JavaScript for this, unless the rest of the site is highly reliant upon it.

Answer 2

To solve this issue I used a variation of the jQuery in the question linked to by #derekerdmann
var maxHeight = 0;
$('#top nav ul').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#top nav').height(maxHeight + 20);
}
});