html+css, put a button next to ul without table

Question

Here is what I want to achieve ^

Here's how it works now: http://jsfiddle.net/yfxPm/1/

The problem is that if I put float:left than the rest of the content will go inside

    <div class='field'>
    <ul class='display'>
    <li>apple</li>
    </ul>
    <button class='btn'>...</button>
    <div>
<button>this button will go inside .field div </button>

(clear:both on .field doesn't help) The css:

.field
{ 
    width: 200px;
    margin: 1em;
}
.display
{
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px gray;
    background: white;
    float: left;    
}

One solution would be to put a <br style="clear:both" /> before the end of the .field div but this will add some additional padding

Answer 1

here is how to use clear:both properly

HTML:

    <div class="field">
       <ul class="display">
            <li>apple</li>
            <li>apple</li>
            <li>apple</li>
            <li>apple</li>
       </ul>
       <button class='btn'>...</button>
       <div class="clear"></div>
    </div>
<button>should be below</button>

CSS:

.field
{ 
    width: 200px;
    margin: 1em;
}
.display
{
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px gray;
    background: white;
    float: left;    
}
.clear {
    clear:both;
}

Using an empty div with class clear, will clear the float and not add any padding. Also it will render the same way on different browsers