Have elements next to each other - html

Question

I've been looking around, and haven't found a way to get my elements to display the way I want them too (Mostly because I've absolutey no idea what I'm doing in CSS).
Here's my JS fiddle:
https://jsfiddle.net/q0qjhk8p/2/
And here's an ASCII demonstation on how I wish for it to be displayed:
Title goes here
----------------------------------------------------------------------------
Content put here should be on [ image
the left side, yet not affect the goes
avatar on the right. here ]
And this
text should
be centered
underneath the
image.
---------------------------------------------------------------------------
Blablablablaba footer

Answer 1

So here's a solution using FlexBox
The things to note are...
I removed all your text-align stuff. That's the wrong property to use to get the layout you're looking for.
I made the Avatar container a percentage width, and set the width of the image inside to 100%. That way you have a somewhat responsive solution. You could set an explicit width of the avatar container if you wanted.
You can set an explicit width for the copy too, if you wanted. I'd suggest setting a percentage width and a right margin.
The heavy lifting is done with flexbox,
.user-profile-card > .user-profile-card-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
background: #AAA;
}

Answer 2

I've added some extra divs and also used the following CSS
float : left // float to content to the left side
float : right // float the avatar to the right side of the card.
display : inline-box // this is to make the image stay on the same line as the content
see fiddle below
https://jsfiddle.net/n4k469o3/
CSS
.user-profile-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
padding: 10px;
border: solid 1px transparent;
}
.content {
width:100px;
display: inline-block;
float: left;
}
.user-profile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2)
}
.user-profile-card > .user-profile-card-title {
padding-bottom: 10px;
border-bottom: solid 1px #ccc;
text-align: left;
font-size: 24px;
}
.user-profile-card > .user-profile-card-body {
padding: 10px;
text-align: left;
}
.user-profile-card > .user-profile-card-body > .user-profile-card-avatar {
align-content: right;
text-align: right;
display: inline-block;
width: 110px;
float: right;
}
.img-card-avatar {
border-radius: 50px;
}
.user-profile-card > .user-profile-card-foot {
padding-bottom: 5px;
padding-top: 10px;
border-top: solid 1px #ccc;
text-align: left;
font-size: 10px;
margin-top:240px;
}
HTML
<div class="user-profile-card">
<div class="user-profile-card-title">
A title is put here
</div>
<div class="user-profile-card-body">
<div class="content">
Content put here should be on the left side, yet not affect the avatar on the right.
</div>
<div class="user-profile-card-avatar">
<img src="https://i.stack.imgur.com/pH9qA.jpg"><br>
And this text should be centered underneath the image.
</div>
</div>
<div class="user-profile-card-foot">
Some footer stuff is put here.
</div>
</div>

Answer 3

The simplest way to do this is to wrap the main content in a div. Then wrap that and the div with the image and subtext in another div. I have wrapped them in main tag below, just so that stands out, but you can use a div if you're not familiar with semantic tags just yet.
https://jsfiddle.net/g90xxaaj/
Then I gave the main tag a css property of display: flex this makes the divs inside it sit side by side.
Then I added have the div encasing the image and subtext a `text-align: center' property.
You don't have to use flexbox for this but it is an excellent way to deal with things like this is css. The other way you could do it is to look into something called floats. Joshua Duxbury's answer explains how to do this. One reason not to use flexbox is that it is relatively new and won't work on internet explorer 9 or older. If that is not a concern then flexbox is much less confusing than working with floats in the long run.
This is probably the best starting point for learning more about flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is a great game to play for practice: http://flexboxfroggy.com/
And here is a fantastic free course if you have the time and are serious: https://flexbox.io/