CODEWITHSUNDEEP
htmlcssimagetextarea
Seong Yup Yoo
Seong Yup Yoo

Reputation: 345

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

I'm trying to make nice comment box. I want to show an image before the textarea in one line/row. The image size should be fixed. The textarea should fill up the rest of the space. The website has dynamic width, so fixing the textarea width doesn't work for me.

But the text area will not go next to the image, but it will 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 this fiddle.

Any ideas on how to achieve this? Check out the comment box at cnn.com to see what I'm talking about.

Upvotes: 2

Views: 4497

Answers (5)

MaxCloutier
MaxCloutier

Reputation: 317

Best way I found to do it without using the position: absolute is the following:

img {
    width: 100px;
    height: 100px;
    float: left;
}
.wrap {
  display: block;
  padding-left: 100px;
}
textarea {
    display: block;
    height: 100px;
    width: 100%;
}
<img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png"/>
<div class="wrap">
  <textarea></textarea>
</div>

Upvotes: 0

matsolof
matsolof

Reputation: 265

I think this code will do what you want to 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 be needed. My answer is based on this post: http://jsfiddle.net/QaWMN/2/.

Upvotes: 1

wildhaber
wildhaber

Reputation: 1661

It looks a bit weird, but this will do the trick:

http://jsfiddle.net/6shan/4/

Using position absolute for the img and for the textarea inside a relative div.

<div>
    <img src="..."/>
    <textarea></textarea>
</div>

CSS:

div {
    position: relative;
    padding: 0px;
    margin: 0px;
    height: 100px;
}

div img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 1px;
    left: 1px;
}

div textarea {
    display: block;
    position: absolute;
    top: 0px;
    left: 110px; /* 100px of the image's width plus 10px margin */
    right: 0px;
    height: 100px;
}

Upvotes: 0

TNK
TNK

Reputation: 4323

try this

HTML CODE : 

<div>
   <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png" />
    <textarea cols="20" rows="4"></textarea>
</div>

CSS CODE 

div img {
    float: left;
    width: 100px;
    height: 120px;
    margin: 0 5px 0 0;
}

div textarea {
    width: 80%; // adjust this value you need
}

Upvotes: 0

codetantra
codetantra

Reputation: 258

I think you are looking for something like this : http://jsfiddle.net/6shan/

Here is the html :

<div class="comment">
    <div class="avatarContainer">
    <img class="avatar" src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png"></img>
    </div>
        <div class="commentBody">
        <div class="commentHeader">commentHeader</div>
        <textarea class="commentText">commentText</textarea>
    </div>
</div>

and here is the accompanying css :

.comment
{height:150px; width:250px;
    border:1px solid black;
    padding:15px;
}
.avatar 
{ height:px; width:24px;}
.avatarContainer
{ height:150px; width:30px;float:left;}
.commentBody
{ height:150px;width:220px;float:right;}
.commentHeader
{height:30px; width:100%; margin-left:10px; border-bottom:1px solid black;}
.commentText 
{ height:100px; width:100%;
margin:10px 10px 10px 10px;}

Upvotes: 0

Related Questions