Responsive text input beside image with fixed size in HTML and CSS

Question

I am developing a website. Now I am beautifying my website. Now I am having a problem with designing my website.

This is something what I want to achieve

As you can see in the higlighted area, there is a image and textarea in the div. I want to get it responsive. I mean, it will have the max-width, when the user low down the screensize, it will become smaller, but it has min-width. I mean the parent div is not fixed size. It will be changing.

But I always want them stay side by side. But the image will always have fixed size. It will never change no matter screen size is changing. But only the text input field will be responsive according to the parent. Here is my code:

This is my HTML

  <div>
    <div class="comment-form">
         <img class="comment-avatar" src="/Images/user_avatar.png" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

This is my CSS

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
}

As you can see in the css, I am making comment-form responsive setting width to 100% with min-width and max-width. The avatar image will have the fixed size. The problem is setting the width of the textarea. I always want image and textarea side by side. I want textarea takes the rest of the form area. So I set its width with percentage. As you can see, now width is 86%. If I set it to 100%, form became something like below.

But with current code, I get like the first image. But when I resize the screen, it becomes something like this.

They are not side by side any more. So my current code is not responsive. What I want to make is I want image always fixed side and want textarea takes the rest or remaining area of form-container no matter what screen size is changed to.

Answer 1

Maybe , this helps... i just added box-sizing and used calc to calculate width of text area

 .comment-form{ padding:5px; border:1px solid #CFD8DC; width:100%; min-width:280px; max-width:490px; box-sizing: border-box } .comment-avatar{ width:60px; height:54px; display: inline-block; border:1px solid #CFD8DC; box-sizing: border-box; } .comment-textarea{ width: calc( 100% - 70px); display:inline-block; border-radius:0px; height:54px; display: inline-block; box-sizing: border-box; } 

 <div> <div class="comment-form"> <img class="comment-avatar" src="https://upload.wikimedia.org/wikipedia/en/7/71/SmallTownSouthernMan.jpg" /> <textarea placeholder='Please log in first' class="comment-textarea"></textarea> </div> </div> 

Answer 2

Working Fiddle

I have deleted the irrelevant css parts. The magic happens with border-box and padding from the outer container.

.comment-form{
  position: relative;
  width:100%;
  padding-left: 62px;
  min-width:280px;
  max-width:490px;    
  box-sizing: border-box;
}

.comment-avatar{
  position: absolute;
  width:60px;
  height:54px;
  left: 0;
}

.comment-textarea{
  width:100%;
  height:54px;
}

With the avatar taken out of the normal flow by position: absolute you are able to set the textarea width to 100% and simulate the offset with padding on the outer form element.

Answer 3

Three steps:

1. Apply display:flex to the parent container
2. Give the img a fixed width
3. Give the textarea a flexible width using calc()

See:

 .comment-form { display: flex; width: 60vw; height: 84px; border: 1px solid rgb(191,191,191); } .comment-avatar { width: 60px; height: 60px; margin: 12px; background-color: rgb(127,127,127); } .comment-textarea { width: calc(100% - 96px); margin: 12px 12px 12px 0; border: 1px solid rgb(63,63,63); } 

  <div> <div class="comment-form"> <img class="comment-avatar" src="/Images/user_avatar.png" /> <textarea placeholder='Please log in first' class="comment-textarea"></textarea> </div> </div> 

Answer 4

I guess display: flex should do the job just fine!

Btw. flexbox is a good thing looking into: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .comment-form{ padding:5px; border:1px solid #CFD8DC; width:100%; min-width:280px; max-width:490px; display: flex; /* <-- right here :) */ } .comment-avatar{ width:60px; height:54px; object-fit:cover; border:1px solid #CFD8DC; } .comment-textarea{ width:86%; display:inline-block; border-radius:0px; height:54px; } 

 <div> <div class="comment-form"> <img class="comment-avatar" src="/Images/user_avatar.png" /> <textarea placeholder='Please log in first' class="comment-textarea"></textarea> </div> </div> 

Answer 5

This work for me, try:

<div>
    <div class="comment-form">
         <div class="comment-avatar">
           <img src="/Images/user_avatar.png" />
         </div>
         <div class="textareawrap">
          <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
         </div>

    </div>
  </div>

and in your css:

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;

}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
    position: absolute;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
    margin-left: 80px;
}

Answer 6

try also to add to the comment-from display attribute like this:

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    display:inline-flex
}

but notice that The values "flex" and "inline-flex" requires a prefix to work in Safari. For "flex" use "display: -webkit-flex", for "inline-flex" use "display: -webkit-inline-flex;".