Moving text to top of paragraph/center next to image

Question

I have an image and I want to add the title of it and a basic description of it, to the right of the image. I tried using position: relative, absolute. padding & margin: 0px.

The link is: URL

The game "Rock, Paper, Scissors", and "Miji", game titles should be on the top of the image to the right, then under that I will add the game description.

Thanks!

Answer 1

A simple way for playing items on your page without having to mess around with specific margining and padding (which can get messy on busy pages) is by choosing your position (relative, absolute, etc) and then use left, right, and top to move it around the page.

For example

.exampleClass {
position: relative;
left: 20px;
top: 5px;
}

Play around with the numbers and position type until you have a good understanding about how they effect the items and you should have no problem tweaking the placement of the objects on your page.

Answer 2

<a href="Games/RPS.html"><img src="Games/RPS.jpg" width="15%" height="15%" alt="Rock, Paper, Scissors"></a>

Take these two tags first

 <span id="gameTitle">Rock, Paper, Scissors, Shoot</span>

Alternate these positions two tags!

<span id="gameTitle" style=" float: left;">Rock, Paper, Scissors, Shoot</span>

Style the span to style="float: left"; Add <br/> between these <a href.... and <span id=....

Your output will be then http://myslambook.pe.hu/demo.png

Answer 3

Hello As per my understanding your trying for something like this below https://jsfiddle.net/up1v5j0z/28/

<ul>
    <li><div class="content"><img src="http://i.stack.imgur.com/FZVih.jpg?s=328&g=1" height="200px";><h4>Roshan Padole </h4><p>Senior Software Engineer and DigitalMarketing Experts</br>Management of the manpower with effective positive results. </p></div><br style="clear:both"></li>
</ul>

 .content img {float:left}


[https://jsfiddle.net/up1v5j0z/28/][1]  

Hope this will help you