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

Question

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>");
 });                                 
}             

Answer 1

Change your display type to inline-block

#anothercontainer li { display:inline-block; }