Responsive text input next to a fixed-size image in HTML and CSS

Question

I am developing a website. Now I am decorating my site. Now I have a problem with the design of my site.

This is what I want to achieve.

As you can see in the high light area, the div has an image and a text box. I want him to be responsive. I mean that it will have a maximum width, when the user reduces the screen size, it will become smaller, but it has a minimum width. I mean, the parent div is not a fixed size. He will change.

, . . , . . :

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>

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;
}

css, 100% . . . . , textarea . . , 86%. 100%, - .

. , - .

. . , , - , , , , textarea -, , .

Answer 1

, ... box-sizing calc

.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>

Hide result

Answer 2

Fiddle

css. border-box padding .

.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;
}

position: absolute, textarea 100% .

Answer 3

, display: flex !

Btw. flexbox - , : 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>

Hide result

Answer 4

, :

<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>

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 5

:

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

, "flex" "inline-flex" Safari. "flex" "display: -webkit-flex", "inline-flex" "display: -webkit-inline-flex;".

Answer 6

Three steps:

• Apply display:flexto parent container
• Give a imgfixed width
• Give textareaflexible width usingcalc()

Cm:

.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>

Run codeHide result