Keep inline-block text next to image

Question

I'm trying to place some text next to an image inside a container div of fixed width. To do this I'm using display: inline-block on the text. This works when the text is short but when it gets longer than the div it just moves downwards as seen in this snippet:

.container {
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
}

img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align: middle;
    
}

.text-container {
   margin-left: 10px;
   display: inline-block;
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/>
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/>
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

What I'd like to achieve is something like this:

So the text is still vertically aligned in the middle and next to the image.

Is there any way to achieve this?

Answer 1

The img is an inline element, and the .text-container is an inline block. When the an inline element can't fit in the current line, the line breaks, and the element is moved to the next line.

To Prevent that set white-space: nowrap on the .container. To enable the wrap inside the .text-container, define it's width, and return the white space behavior to normal (wrap).

.container {
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
  white-space: nowrap; /** force the elements to stay side by side **/
}

img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid black;
  vertical-align: middle
}

.text-container {
  display: inline-block;
  width: calc(100% - 60px); /** containers width - img width - margin-left **/
  margin-left: 10px;
  white-space: normal;
  vertical-align: middle
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

However, you can simplify the structure even further by using a flexbox with align-items: center:

.container {
  display: flex; /** set the container as flexbox **/
  align-items: center; /** align all items vertically **/
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
}

img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid black;
}

.text-container {
  margin-left: 10px;
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

And by using flexbox, you can also move the image with it's border to the background of .container to get a single div solution.

.container {
  display: flex; /** set the container as flexbox **/
  align-items: center; /** align all items vertically **/
  box-sizing: border-box; /** the padding and the border are part of the width **/
  width: 202px;
  min-height: 54px;
  margin-bottom: 10px;
  padding-left: 60px; /** save space for the image and the margin between the image and the text **/
  border: 1px solid red;
  /** set the image and the image border as backgrounds **/
  background: radial-gradient(circle at center, transparent 0, transparent 24px, black 24px, transparent 26px), url(http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png);
  /** set the backgrounds size **/
  background-size: 51px 51px, 50px 50px;
  background-repeat: no-repeat; /** prevent the backgrounds from repeating themselves to fill the container **/
  background-position: left center; /** position them in relation to the container **/
}

<div class="container">
  I AM TEXT
</div>

<div class="container">
  I AM TEXT OH NOO
</div>

Answer 2

One solution would be to float the image, and use display: block on your text-container. That would wrap the text down below the image if it got big enough. I also moved the margin style to the image, and you could further adjust the spacing.

.container {
  width: 200px;
  margin-bottom: 10px;
}

img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align: middle;
    float: left;
    margin-right: 10px;
}

.text-container {
   display: block;
}

<div class="container">
 <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/>
<div class="text-container">I AM TEXT OH NOOO</div>
</div>

Since everything is fixed size, you could also keep things as inline-block, but use a fixed width on your text container.

Answer 3

CSS shapes shapeOutside:”rect()” & float:”left” on the image seems the way to go, lo, the css calc() in the container misses floated elements (edit: in the photo, I was using ellipse() instead. height:"min-content" on <div></div> parent needed when text outside isn't long enough for next photo, with text inside before or after your <img/>'s, using the parent as a group). Staggering float: "left" or "right" looks nice but likely not best practice contenteditable as I originally suspected.)

Answer 4

You are getting this because divs automatically put themselves on a newline. If you use the <span> tag around the text, it should show up on the same line as the image.

Try replacing:

<div class="text-container">I AM TEXT OH NOOO</div>

with:

<span class="text-container">I AM TEXT OH NOOO</span>

Hope that helps!