Two column layout with floating divs breaks when adding items to list using jQuery

The HTML looks like this.

<div id="leftcontainer">           
 <div id="anothercontainer">               
  <ul id="items">
   <li>Text</li> 
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>...</li>                                                                                              
  </ul>                         
 </div> 
</div> 

<div id="rightcontainer">           
 <div id="yetanothercontainer">                                  
    <ul>
   <li>Title</li>
   <li>Title</li>
   <li>Title</li>   
    </ul>
 </开发者_运维技巧div>               
</div>

And the CSS looks like this.

#rightcontainer { float:right; width:40%; } 
#leftcontainer { float:left; width:60%; }
#anothercontainer { list-style: none; } 
#anothercontainer li { display:inline; }

So far so good. If there a lot of listitems in the items list, the listitems start on a new line when they almost touch the rightcontainer.

But when I add some more items to the list using jQuery, the items don't break anymore. But just keep going to the end of the page, overlapping the rightcontainer.

function success(data, textStatus) {
 $.each(data.d, function(i, item) {
  $("#items").append("<li>" + item.Name + "</li>");
 });                                 
}             

Change your display type to inline-block

#anothercontainer li { display:inline-block; }

Check out this here:

http://jsfiddle.net/MZnuz/1/

It appears that it works fine as long as there is a space between the words. As would be expected with an inline element. This is extended further to the space around the LIs (as would also be expected) when stacking inline elements next to each other. As you can see in the example above, I've added a single space next to the in your javascript. When it comes to inline elements, browsers render HTML spacing like this:

Single space = single space Multiple spaces (and tabs) = single space No space = no space

Alternatively, you can set up your LIs as floated blocks like this:

http://jsfiddle.net/MZnuz/2/