CSS/Javascript - Divs erstellen (Nebeneinander)

[Chef]

Hallo,

ich habe auf meiner Webseite ein Leiste eingebaut die immer unten angezeigt wird (Div-Layer). Nun will ich das man dort weitere Div-Layers erstellen kann "Tabs" die nebeneinander angezeigt werden. Mit Javascript erstelle ich ein neuen Div-Layer das funktioniert auch Super, nur werden die nicht nebeneinander angezeigt. Javascript-Code sieht so aus:

  
function newtab(user,userID) {  
	if ($("#chat"+userID).length<=0) {  
		var title=document.createElement("div");  
		title.id=userID;  
		title.innerHTML=user;  
		$(title).addClass("title");		  
		var usertab=document.createElement("div");  
		$(usertab).height(30);  
		usertab.id="chat"+userID;  
		$(usertab).append(title);  
		$(usertab).addClass("usertab");  
		$("#chatpanel").append(usertab)  
usw.  

Die Klase "title" und "usertab" so:

  
.usertab  
{  
	position:absolute;  
	display:block;  
	bottom:0px;  
	background-color:#ECECEC;	  
	float:left;  
}  
  
.title  
{  
	background-color:#ECECEC;  
	margin:1px;  
	width:100%;  
	padding-top:5px;  
	padding-bottom:5px;  
	padding-left:10px;  
	padding-right:10px;  
	text-align:center;  
	border:1px solid silver;  
	cursor:pointer;  
	font-weight:bold;  
}  

Bei der Klasse "usertab" ist es wichtig das position:absolute bleibt. Auf einem Klick auf dem Titel soll sich das Tab vergrößern "ausklappen":

  
$(".title").live("click",function() {  
	var userid=$(this).attr("id");  
	var chat=$("#chat"+userid);  
	if (chat.height()==30) {  
		$(this).width(220);  
		chat.height(330);  
	} else {  
		chat.height(30);  
		$(this).width("100%");  
	};  
};  

Klappt auch wunderbar, allerdings nur wenn position:absolute angegeben ist. Weiß wer eine Lösung das die Div-Layer nebeneinander angezeigt werden? Weiß einfach nicht mehr weiter wie ich das ganze machen soll :(