Высота списка

[nevermore]

всем добрый вечер. Подскажите, пожалуйста, как можно узнать высоту списка, в котором для пунктов проставлено float:left;

список заключен в див с определенной шириной. Т.е. получается, что элементы списка переносятся на другую строку, если выходят за размеры этой ширины. Тем не менее offsetHeight для списка выдает 0

вот код:

<style>
#novelty ul li{float:left;list-style:none; margin-right:10px;}
#novelty ul{width:500px; margin:0px; padding:0px; position:relative;}
#novelty{margin-left:400px; width:500px; height:40px; overflow:hidden; border:1px solid;}
.q{position:relative;}
</style>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="novelty">
	<ul>
		<li><a href="#">1 sdjkljljljkkjkljklj</a></li>
		<li><a href="#">jljkkjkljklj</a></li>		
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">xsdffffdjkljljljkkjkljklj</a></li>
		<li><a href="#">2sdjkjlj</a></li>
		<li><a href="#">sdjklcxjkljklj</a></li>
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">sdklj</a></li>
		<li><a href="#">3sdccccccffdfecccccckljljljkkjkljklj</a></li>
		<li><a href="#">sdjkljljkk</a></li>
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">sdjkljkljklj</a></li>
		<li><a href="#">4sdjkljfkjkljklj</a></li>
		<li><a href="#">sdjklj</a></li>
		<li><a href="#">sdjkffffljljljkkjkljklj</a></li>
		<li><a href="#">sdjkljljflj</a></li>
		<li><a href="#">5sdjkljlkljklj</a></li>
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">jljkkjkljklj</a></li>		
		<li><a href="#">6sdjkljljljkkjkljklj</a></li>
		<li><a href="#">cxsdffffdjkljljljkkjkljklj</a></li>
		<li><a href="#">sdjkjlj</a></li>
		<li><a href="#">7sdjklcxjkljklj</a></li>
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">sdklj</a></li>
		<li><a href="#">8sdccccccffdfecccccckljljljkkjkljklj</a></li>
		<li><a href="#">sdjkljljkk</a></li>
		<li><a href="#">sdjkljljljkkjkljklj</a></li>
		<li><a href="#">9sdjkljkljklj</a></li>
		<li><a href="#">sdjkljfkjkljklj</a></li>
		<li><a href="#">sdjklj</a></li>
		<li><a href="#">10sdjkffffljljljkkjkljklj</a></li>
		<li><a href="#">sdjkljljflj</a></li>
		<li><a href="#">sdjkljlkljklj</a></li>
	</ul>
</div>
<script>
$(document).ready(function(){
	alert($("#novelty ul").attr("offsetHeight")); // равно 0
})
</script>
</body>

пробовал вставлять до и после списка два дополнительных дива и определением их координат вычислят высоту списка - не помогло. У обоих дивов в результате свойство top имеет одно и то же значение, как будто они находятся на одной строке. Есть ли способ определения высоты списка в данной ситуации.

[sammasati]

Попробуйте поставить "overflow: hidden" списку (<ul>).

$("#novelty ul").attr("offsetHeight")

Хм...откуда такую запись взяли? У меня она вообще не работает...

Попробуй ещё поменять её на:

$("#novelty ul").outerHeight()

Edited January 19, 2012 by sammasati

[nevermore]

Попробуйте поставить "overflow: hidden" списку (<ul>).

$("#novelty ul").attr("offsetHeight")

Хм...откуда такую запись взяли? У меня она вообще не работает...

Попробуй ещё поменять её на:

$("#novelty ul").outerHeight()

Попробуйте поставить "overflow: hidden" списку (<ul>).

Помогло, спасибо )). Только не совсем понял логику

Edited January 20, 2012 by nevermore

[sammasati]

Суть в том, что плавающие элементы выпадают из потока. Поэтому высота ul'a равна нулю. Получается, что элементы списка, как бы, отсутствуют в нем. Он не захватывает их.

А "overflow: hidden" отменяет обтекание для ul'a. Вот здесь подробнее: http://htmlbook.ru/samlayout/blochnaya-verstka/plavayushchie-elementy