I would like to know how to align the image inside the div on the right side?
There are plenty of ways to align with CSS, each one has it's benefits and disadvantages, you could test them all to check which one fits your case better: http://www.w3schools.com/css/css_align.asp
TIP: Always search using W3 as extra word, that will give you in first places the resources of the W3school website or the w3.org if there's any relevant.
You can give the surrounding div
a
text-align: right
this will leave white space to the left of the image. (= the image will occupy the whole line).
If you want content to be shown to the left hand side of the image, use
float: right
on the image. However, the surrounding div
will then need overflow: auto
to stretch to the needed height.
vertical-align:middle; text-align:right;
<style type="text/css">
>> .imgTop {
>> display: block;
>> text-align: right;
>> }
>> </style>
<img class="imgTop" src="imgName.gif" alt="image description" height="100" width="100">
<p>
<img style="float: right; margin: 0px 15px 15px 0px;" src="files/styles/large_hero_desktop_1x/public/headers/Kids%20on%20iPad%20 %202400x880.jpg?itok=PFa-MXyQ" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.
<br style="clear: both;" />
</p>
<div style="width:300px; text-align:right;">
<img src="someimgage.gif">
</div>