problem with width/lengh with percentual

I have this HTML :

<div class="messageQuoted"><a href="#">user1</a> wrote :<br>
    <div class="messageQuoted"><a href="#">user2</a> wrote :<br>
        text1
    </div>
    text2
</div>

with this CSS :

.messageQuoted{
    background-color:#EAE9E8; 
    width:100%; 
    float:left;  
    margin-bottom:20px; 
    padding-left:10px; padding-top:5px; padding-bottom:5px; 
    border-left:4px solid #333333; border-right:1px #000000 solid; 
    border-bottom:1px #000000 solid; border-top:1px #000000 solid;
}

but how can you see on this link, the second div with "text2" exit from the the container!

Why? It is 100% (or at least, until the container have space).

Right? How can I fix it?

If you want the div to be full-width, get rid of width and float altogether. The default behavior is to expand horizontally.

This is because of the box model: padding values will be added to the 100% width.

However, a div will automatically assume 100% width including all padding if you don't specify a specific width. If you remove these lines:

width:100%; 
float:left;  

the div will automatically take up all available width.