I am having some trouble with using css and javascript based dom modifications. I am doing an insertBefore in a drag and drop script and sometimes if the window size is ... 2 consecutive li's will be placed one on two different lines rather than scroll over to the start of next line (width auto).

I am attaching a fairly simple page that you have to play around with for a second to get it to break. If you resize the window width in very small increments (easier if you start from small then go to big). It breaks for me @ clientWidth = 356 (on ie). However you can get this to break by resizing so that the red bordered list item is at a start of a new line and increase the width of the browser slightly, before the item 7 doesn't jump on same line. What you will see is Item 6, then red box li empty item, then below you will see Item 7.

Can someone help me fix this please. I am not sure why this is occuring but I am sure this is a correct css behavior that I am simply overlooking as it happens in most browsers. Please note this simple example won't run in firefox or safari. My actual script is much bigger and does break in safari and firefox same way as in IE, just threw this together for posting sake.

Thanks,
Alex.

<html>
<head>
<title>page that breaks</title>
<style type="text/css">
<!--
#navigator {
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
display: block;
}

#navigator ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigator li {
float: left;
margin: 2px 2px 0px 0px;
padding: 5px 0 4px 0;
position: relative;
}

.dropCue {
position: relative;
margin-top: 10px;
padding: 0;
border: 1px dashed red;
}

#navigator a, #navigator a:link, #navigator a:visited, #navigator a:active {
margin: 0;
padding: 5px 9px 4px 9px;
color: #00487D;
text-decoration: none;
display: block;
}

#navigator a:hover {
color: #000;
}

-->
</style>

<script type="text/javascript" language="javascript">
<!--
function onresize() {
var item = document.getElementById('item');
if (!item) {
item = document.createElement('li');
item.id = 'item';
item.className = 'dropCue';
item.innerHTML = '&nbsp;';
}
var list = document.getElementById('list');
var lastItem = document.getElementById('lastItem');
item.style.width = lastItem.offsetWidth + 'px';
list.insertBefore(item, lastItem);
}
-->
</script>
</head>
<body onresize="onresize()">

<div id="navigator">
<ul id="list">
<li><nobr><a href="#">Item name 1</a></nobr></li>
<li><nobr><a href="#">Item name 2</a></nobr></li>
<li><nobr><a href="#">Item name 3</a></nobr></li>
<li><nobr><a href="#">Item name 4</a></nobr></li>
<li><nobr><a href="#">Item name 5</a></nobr></li>
<li><nobr><a href="#">Item name 6</a></nobr></li>
<li id="lastItem"><nobr><a href="#">Item name 7</a></nobr></li>
<li><nobr><a href="#">Item name 8</a></nobr></li>
<li><nobr><a href="#">Item name 9</a></nobr></li>
<li><nobr><a href="#">Item name 10</a></nobr></li>
<li><nobr><a href="#">Item 11</a></nobr></li>
<li><nobr><a href="#">Item name 12</a></nobr></li>
<li><nobr><a href="#">Item 12</a></nobr></li>
<li><nobr><a href="#">Item 13</a></nobr></li>
<li><nobr><a href="#">Item 14</a></nobr></li>
<li><nobr><a href="#">Item 15</a></nobr></li>
</ul>
</div>

</body>
</html>