Make element appear to the right of a div - html

Question

I'm making this little website, and I'm trying to make user profiles. I'm honestly not the best with HTML and CSS but basically, my problem is, that I want to display the profile picture in the top left of the "jumbotron" (I'm using bootstrap), and have the username just to the right of it, with a little paragraph/quote/motto beneath the username. However, I cannot get it to work.
Here is my current code:
HTML
<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron">
<div class="profile-picture">
</div>
<h1><?php echo "$profile_name" ?></h1>
</div>
</div>
CSS:
.jumbotron {
margin-top: 5%;
margin-bottom: 2%;
}
.profile-picture {
width: 200px;
height: 200px;
background-color: white; /* Just as a test profile picture */
}
Here is the result of this code
I have tried to right-align the text, but to no avail.
Of course, there's the obvious float:right, which works well enough, but then the height of the jumbotron gets all screwed up! Unless I am doing something wrong with that.
So with all that said, I hope someone can help me, as you seem pretty helpful here!
Thank you for taking the time to read my issue, and I hope you can assist me in fixing it!

Answer 1

<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron col-md-12">
<div class="profile-picture pull-left col-md-5">
<img class="img img-responsive" src="Your image" style="width:200px"/>
</div>
<h1 class="pull-right col-md-7">
<?php echo "$profile_name" ?>
</h1>
</div>
</div>
.profile-picture {
background-color: white; /* Just as a test profile picture */
}
I think something like this would do the trick since you are using bootstrap framework. Note the css classes I have put pull-left and pull-right. col-md-5 and col-md-7 are used to divide the div columnwise.
by using img-responsive you will be able to proportionally align image inside the div.

Answer 2

You can do one easy thing (picture, name and quote are all divs):
<------------------- LARGE DIV ------------------->
<---PICTURE(float:left) NAME(float:right)
<br>
QUOTE(float: right)
<------------------------------------------------->
How to accomplish this:
<div id="profileContainer" style="width: 800px;">
<div id="picture" style="width: 200px; float: left;"><img src="yourimage.jpg"></div>
<div id="name" style="width: 400px;"><?php echo "$profile_name" ?></div>
<br>
<div id="quote" style="width: 400px; float:right;">Text about stuff</div>
</div>
So basically you have the profileContainer div with a width you want, the picture with the width of the div being the picture size and the name floating to the right. By changing the profileContainer width you can get the name closer to the picture, or you can also set a margin-right: #px; on the Name and the Quote.