这是我的css破坏或jquery的附加方法吗？

Question

生成外部容器（代码未更改，chrome dev工具）：

生成内部容器（代码未更改，chrome dev工具）：

我在javascript中使用append自动生成音乐播放列表。在我通过PHP生成html代码之前，css工作正常，但现在当我使用append时，大约50％的时间它会将自己置于其外（参见图1和图2进行比较）。

    $(document).ready(function() {
                var str;
                for(var i = 0; i < 20; i++){
                    if(data.songurl[i] != 'undefined'){
                        str = str + "<div id='playlistSubContainer' class=''><div id='playthumbContainer'><a class='playlist' href =''><img width='70' height='55' src=''/></a></div><div id='playlistUrl'><a class='playlist' href ='http://localhost:8080/lttfeed/?a='></a> - <a class='playlist' href='http://localhost:8080/lttfeed/?n='></a></div><br><div id='playlistInfo'>Location: <a class='playlist' href ='http://localhost:8080/lttfeed/?l='></a> |    Genre: | Year: <a class='playlist' href='http://localhost:8080/lttfeed/?y='></a><br>Views: <a class='playlist' href ='#'></a> | Likes: <a class='playlist' href ='#'></a> | Comments: <a class='playlist' href=''></a> | <a class='playlist' href='redditUrl'><img style='margin-bottom:-3px;'width='16' height='16' src='images/redditicon.png' /></a></div></div><div class='musicInfo' id=''></div>";
                    }
                }
                $("#playlistContainer").append(str);
});

它是一个相当大的HTML字符串，虽然它是从我正在运行的PHP html代码中直接转换而来的。

相关CSS：

#playlistContainer {
    position:absolute;
    width:500px;
    height:75%;
    float:left;
    clear:left;
    overflow: auto;
    border: 2px solid;
    border-color:171717;
    background-color:e0d1d1;
    margin-left:-10px;
    margin-top:10px;
}
#playlistInfo{
    font-size:12px;
    margin-top:-25px;
    margin-bottom:10px;
}

#playlistSubContainer{
    color:c7e9ee;
    position:relative;
    overflow: auto;
    width:504px;
    border-top: 1px solid;
    border-color:black;
    padding-top:10px;
    background-color:333333;
    display:inline-block;
    box-shadow: 0px 0 20px  #484848;
    border-left: 4px solid #FFFFFF;
    padding-right:100%;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

我真的被这个问题困扰了。我知道我的css不是那么崩溃，但是当我使用PHP生成它时它工作正常，这个问题只发生在我生成它并使用append将它附加到容器时。它看起来是随机的，有时我可以刷新页面5次，每次都会从容器中取出，有时它会留在容器内。为任何帮助干杯

JSFIDDLE