html - How to a put a textarea next to an image and have it fill up rest of the space? -

html - How to a put a textarea next to an image and have it fill up rest of the space? -

i'm trying create nice comment box. want show image before textarea in 1 line/row. image size should fixed. textarea should fill rest of space. website has dynamic width, fixing textarea width doesn't work me.

but text area not go next image, go under it.

<img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png" style="float:left;"/> <textarea style="float: left; height: 200px; margin-left: 210px; width:100%"></textarea>

see fiddle.

any ideas on how accomplish this? check out comment box @ cnn.com see i'm talking about.

i think code want do:

<div style="position:absolute; left:100px; right:100px;"> <div style="position:relative;"> <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/ avatars/male200.png" style="position:absolute;"> <div style="position: absolute; left:210px; right:0px; top:0px;"> <input type="textbox" style="width:100%; height:200px; display:block; padding:0;"> </div> </div> </div>

some fine-tuning may needed. reply based on post: http://jsfiddle.net/qawmn/2/.

html css image textarea