How to wrap text in li to be as long as the width of ul?

Question

I want each text in each <li> to have the same width as the width of the <ul>. But somehow it doesn't work, the text just keeps going and going... I read somewhere on here that giving <ul> a width will solve the problem, but it doesn't work in my case. This is my HTML:

<div id="chat-wrapper" style="display:none;">
<div id="main-content">
    <div id="user-list-wrapper">
        <b>USERS</b>

        <ul id="user-list">
        </ul>

    </div>

        <div id="messages-main">
            <ul id="messages"></ul>
        </div>
<input id="message-input" placeholder="Your message here!" autofocus="autofocus"/>
<input type="button" id="datasend" value="send"/>
 </div>

And this is my CSS:

#user-list-wrapper {
    float:left;
    width:100px;
    border-right:1px solid black;
    height:300px;
    overflow:scroll-y;
}

#login-wrapper {
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

#messages-main {
    height:320px; 
    width:950px; 
    overflow:none;
    float:left;
    margin-left:20px;
}
#message-input {
    width:500px; 
    outline:none; 
    height:100px;
    margin-left:300px;
    line-height:100px;
}
#datasend{
}
#main-content {
    width:100%;
    height: 350px;
}
#messages {
    list-style-type:none;
    margin:0;
    width:900px;
}
#messages li {
    width:100%;
    padding:3px;
    border-bottom:1px solid #CCC;
}
#user-list {
    padding:0;
}
#user-list li{
    padding:3px;
    list-style:none;
    border-bottom:1px solid #CCC;
}

But this doesn't work for me. What do I have to do to achieve what I want in my case? Thanks.

UPDATE: I added the exact code I have.

UPDATE 2: The text exceeds also #main-content. So it's not only the <ul>

Answer 1

If you are using css3 you can try adding

word-wrap: break-word;

to the li css

Answer 2

You need to put 100% for li element. Here's an example, http://jsfiddle.net/HQPGS/