Just lost with a CSS style - html

Question

Sorry, I feel like making someone else to do my job but I feel really lost here, here's an image of what I got now:
Where the two "Anonomymos" are is ment to be the place for tha active users in the chat, however, the more people I add to the chat the <div> tag where the message is posted goes under the <div> tag for the active users and obviously I want to be shown next to each other.I use a premade CSS style sheet for this, and hope that it could be changed in way to work for my needs, but I have poor knowledge about CSS so I'm not even sure if it is usable in my case, anyways, here is the CSS style that I use at the moment:
#ActiveUsers
{
clear:both;
border: 1px solid #cccccc;
width: 356px;
background: #E9ECEF;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:2px;
margin-bottom:10px;
margin-top:10px;
margin-left: 60px;
}
#chat
{
margin: auto;
border: 1px solid #cccccc;
width: 356px;
background: #E9ECEF;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:2px;
height:400px;
overflow:auto;
}
#main {
margin: auto;
border: 1px solid #cccccc;
width: 600px;
min-height:150px;
background: #F1F3F5;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
border-collapse:collapse;
}
#sender
{
margin-left: 125px;
}
And here is the structure in the .php file :
<div id="main">
<div id="ActiveUsers"></div>
<div id="chat"></div>
<div id="sender">
Your message: <input type="text" name="msg" size="30" id="msg" />
<button onclick="doWork(document.getElementById('msg').value);">Send</button>
</div>
<span id="logOut">
<form action="logout.php">
<input type="submit" value="Logout"/>
</form>
</span>
</div>
P.S Just to mention, now the #ActiveUsers width is more than the free space but even if I make it 30px, the #chat <div> still goes under and under with every new user that is logged.

Answer 1

The issue might be that your Active Users are wrapped in some block-element when they are dynamically added to your markup. Based on how it is displayed, I'm guessing that
<div id="ActiveUsers"></div>
turns into
<div id="ActiveUsers"><div>Anonymos</div> <div>Anonymos</div></div>
Check to see if your active users are wrapped by any tag. If they're wrapped with a <div> tag, you'll need to add this to your CSS:
#ActiveUsers div {
display: inline;
.
. /* Your styles here */
.
}