CSS style to create an HTML with an image on left and input text boxes on right that fills all space
- by dafi
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%;
}
