Make image appear inline with a div within an outer div using css

Question

I am trying to place an image to the right of a pseudo input box using css to imitate Apple's iMessage app. However, the image keeps displaying below the pseudo input box as follows:

Most answers suggest using display:inline-block and I have put this in the class for both the outter and inner div with no luck. (Have also tried float:left, float:right and display:inline-block on image and there is no difference.)

How can I get the arrow to appear to the right of the pseudo input box as the microphone image is below?

Here is my code for the input field:

    .inputbox {
    border-radius: 20px;
      min-height: 30px;
      width: 300px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px #EEE;
      display: inline-block; 
    }
    .inputBoxInner {
      border-radius: 20px;
      min-height: 30px;
      width: 240px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px #EEE;
      height:" auto";
      display: inline-block; 
    }
    .inputBoxInner:empty:not(:focus):before {
      color: lightgrey;
      font-family: helvetica;
      content: attr(data-placeholder)
      display: inline-block; 
    }

    <div class = "inputBox" contentEditable="true"><div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing"></div><input type="image" id="image" alt="Send"
           src="/images/arrow.png" width="30" height="30 style="float:right"; "></div>

To my understanding, you want that blue circle with an arrow to be placed to the right of the input, right? — Leonard V., Aug 09 '21 at 18:44

Mohamed Zahour · Accepted Answer · 2021-08-10T13:29:27.177

2

The code has a problem:

And this code can resolve the problem:

True code:

inputBox {display: grid; grid-template-columns: 100px 100px}

edited Aug 10 '21 at 13:29

answered Aug 09 '21 at 18:48

Mohamed Zahour

338
2
15

I made this change but did not affect the layout. – user6631314 Aug 09 '21 at 19:06
1

Ok. Use the css grid; for example: `inputBox {display: grid; grid-template-columns: 100px 100px}`. Please check this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). – Mohamed Zahour Aug 09 '21 at 19:10
Using grid did the trick. If you want to put that in your answer I will mark it correct – user6631314 Aug 10 '21 at 13:28
Grid applied to the container did the trick until I fixed the image to the bottom with position: fixed; bottom: 10px;. Now I'm back to same issue. Is there a way to fix image to bottom and also use the grid property to keep it to the right? – user6631314 Aug 10 '21 at 13:46
1

Evidently when you apply position: to something it takes it out of the grid as here: https://stackoverflow.com/questions/43999732/how-to-make-a-fixed-column-in-css-using-css-grid-layout – user6631314 Aug 10 '21 at 13:53

score 0 · Answer 2 · answered Aug 09 '21 at 19:18

This should do it for you

.inputbox {
    border-radius: 20px;
      min-height: 30px;
      width: 300px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px rgb(0, 0, 0);
    }
    .inputBoxInner {
      border-radius: 20px;
      min-height: 30px;
      width: 240px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px rgb(131, 131, 131);
      height: auto;
      display: flex;
      justify-content: end;
      align-content: center;
 
    }
    .inputBoxInner:empty:not(:focus):before {
      color: rgb(255, 0, 0);
      font-family: helvetica;
    }

<body>
    <div class = "inputBox" contentEditable="true">
        <div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing">
            <input type="image" id="image" alt="Send" src="image.png" width="30" height="30" style="float:right">
        </div>
    </div>
</body>

Make image appear inline with a div within an outer div using css

2 Answers2