CSS Lifehack: Avatar with Dynamic Text Wrapping
Level: Beginner, prerequisites: HTML & CSS
More often than not at some point in your web development career you will be asked to create some sort of an avatar with text to the right of it. Why even the avatar on medium happens to have this very type of layout so you can see that sooner or later you will probably be coding one yourself.

For most of us the first thing we’d attempt to do would be to make the image float left and then apply a large enough margin along the bottom that the we ensure that the text does not float underneath as in the example below.

The problem with this approach is that we cannot always know how much text is going to be inside the avatar block and therefore cannot guarantee that the margin will consistently push the content right as desired. This is especially true on blogging websites were comments can be any give length. Another down side to this is if the content is to short and the margin to large you could end up with a huge gap below the block. Okay let’s get to the code, first we’ll start with the markup for this example:
Now a lot is actually going here, so let’s unpack some of the most important parts. First of all the only three things you need to focus on are the fact that we have a a wrapper that surrounds the entire block, another that surrounds the images and a third that surrounds all the content. Now lets add some styles to this.
Which gives us the layout below:

Let’s go ahead and style the avatar image so that we can get that part out of the way and get to the real problem of wrapping the text.

Okay as you can see about we’ve done a couple things to our image in order to give it, it’s size, position and shape. First of all we added a set width to our avatar image in order to control how large or small we want that image to be. In this case we set the with to 60px. Next we told the image wrapper to add a border-radius of 50% in order to create that nice circular shape around the image. (By the way 50% is the value you wanted to use for any size, because 100% will oblong the box.) Then in order to make sure we couldn’t see anything outside our image container such as the parts of the images we want to hide we added an overflow:hidden property, which tells our browsers to hide that content. Finally we wanted to define how much space between the right side of the image and content we want to have. In this case we added 20px. Let’s move on to main problem, getting all text no matter how long to nicely flow to the right of the image.

Surprisingly this incredibly simple. The only thing you have to do is simply add the attribute of overflow:hidden to the content container. Now a word of warning this will make it so that your content box can grow and shrink based on as much or as little of the content that you add to it, however with this hack you can never add a height property to this container or else it will literally cut your content off once it reaches that height. Okay let’s go ahead and make the rest of the component look beautiful.

Download the completed project

