Aligning text with an Image? CSS

Question

I'm trying to put my text to the left of my photo in a nice squarish container. It seems like it should be easy enough, but I must be missing something. After doing some research I've found to use the: "vertical-align" "display-inline" or "float" commands, but I haven't had success with any of them. Is it a problem with my code? Or is there another styling command I should be looking into?

Thank you for the help!

Heres the jsfiddle: https://jsfiddle.net/d7c99nkw/

Heres the code:

 /* Cover */ #tom { position: relative; bottom: 40px; left: 45%; min-width: 55%; max-width: 55%; padding: 12px; -webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white)); } .cover { vertical-align: left; padding: 36px; float: left; } 

 <div class="cover"> <img src="https://lh3.googleusercontent.com/-rVoVQQOFHSk/VUZaG4-rTKI/AAAAAAAAADI/1CvHapoyTOE/w569-h569/derp_boosic.png" id="tom" alt="tomphoto"> <p id="intro">My name is Thomas. I'm an upbeat, self-motivated people person with an affinity for technology, business, people, and all things creative. In my proffessional career in Sales and IT, I've consistently gone above and beyond sales, and customer service, expecations and have been exceptionally successful. I account my success to my natural ability to build relationships with, and relate to people easily. I also practice a vigorous planning, and goal setting lifestyle which allows me to acheive what I set out to do. I know with my personailty, skills, and drive to be successful. Nothing will stop my from reaching my goals. </p> </div> 

Answer 1

Here is a working solution: jsfiddle

In #tom css rule, remove left: 45% rule and add float: right;

#tom {
position: relative;
bottom: 40px;
/*REMOVE left: 45%;*/
min-width: 55%;
max-width: 55%;
padding: 12px;
-webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
float: right;
}

As Paulie_D said, -webkit-box-reflect is no longer supported.

Answer 2

Hi there where a couple of things wrong with your code, you need to give both of the objects you want next to eachother a display: inline-block a and both a nice width. Next you have to swap the html elements around, check out my update on your jsfiddle.

https://jsfiddle.net/d7c99nkw/4/

Answer 3

I corrected the CSS for you:

/* Cover */
#tom{
    bottom: 40px;
    left: 45%;
    min-width: 55%;
    max-width: 55%;
    padding: 12px;
    -webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
}
.cover img{
           float: right;
}