I need to create an HTML page (a JqueryUI dialog but this isn't the problem) containing an image on left (size is fixed to 75x75) and on right some input text boxes, input boxes must resize to all remaining space.

You can see an example at http://img683.imageshack.us/img683/5412/19483174.jpg

The problem is that when I resize the dialog controls move under image as shown at http://img510.imageshack.us/img510/4817/44749696.jpg

How can I resolve this problem in all browser and if possible using only CSS?

Below I show my HTML code and the CSS I'm using

HTML code

<div id="dialog-form" title="Modify Post">
    <form action="">
    <fieldset>
        <img id="dialog-modify-thumb" src="http://dummyimage.com/75x75/000/fff" alt=""
        width="75" height="75"/>

        <div id="dialog-modify-controls">
            <label for="dialog-modify-caption">Caption</label>
            <input type="text" name="dialog-modify-caption" id="dialog-modify-caption"/>
            <br/>

            <label for="dialog-modify-tags">Tags</label>
            <input type="text" name="dialog-modify-tags" id="dialog-modify-tags"/>
            <br/>

            <label for="dialog-modify-publish-date">Publish Date</label>
            <input type="text" name="dialog-modify-publish-date" id="dialog-modify-publish-date"/>
        </div>
    </fieldset>
    </form>
</div>

The CSS

    #dialog-modify-thumb {
      margin-right: 3px;
      border: 1px solid;
      display: block;
      float:left;
    }

    #dialog-form input[type='text'] {
      width: 100%;
    }

    #dialog-modify-controls {
        float: right;
        width:100%;
    }