HTML Element Style How to - Float image to right








Question

We would like to know how to float image to right.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {<!--   w  w w  .  ja  v  a  2s  .co m-->
  float: right;
  clear: right;
  margin: .25em 0 .25em .5em;
}
</style>
</head>
<body>
  <p>
    <img src="http://www.java2s.com/style/download.png" alt="" />
        <img src="http://www.java2s.com/style/download.png" alt="" />
        <img src="http://www.java2s.com/style/download.png" alt="" />
        Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Etiam bibendum, sapien sed
    molestie interdum, nisl erat pulvinar orci, in euismod nisl ligula
    vitae risus. Quisque eu mi et arcu convallis scelerisque in eu metus.
    Nullam dictum tristique metus, eget varius mi porta a. Aliquam velit
    est, hendrerit sed consectetur in, consectetur sed ipsum. Etiam mauris
    orci, feugiat ut rhoncus vel, ornare viverra libero. Integer at dolor
    in leo ornare dictum. Fusce varius tortor ut magna sollicitudin dictum
    in sed arcu. Vestibulum dapibus interdum nunc, vel commodo nisl
    aliquet non. Morbi vel nisi nec nibh congue elementum vel vel libero.
    Praesent non eros mi, ac gravida quam. Curabitur iaculis sapien sit
    amet urna interdum mollis. Nullam varius porta enim in consequat.
    Aliquam dui ante, consectetur sit amet tristique ut, condimentum quis
    purus. Donec in erat vitae purus tincidunt vehicula quis nec urna.
  </p>
  <p>Aenean et justo id enim accumsan varius. Morbi lectus ligula,
    condimentum id ornare ac, hendrerit blandit massa. Mauris in elit dui,
    sed facilisis metus. Ut ultricies iaculis elit, sed malesuada libero
    volutpat in. Etiam laoreet, ipsum venenatis imperdiet sodales, justo
    dolor convallis sem, et semper diam tortor vel libero. Vivamus
    placerat odio vel arcu suscipit sed faucibus odio suscipit. Cras ut
    molestie nibh. Suspendisse vulputate feugiat ante, id pellentesque
    purus consectetur nec. Curabitur nisl nisi, ultricies sed pretium ac,
    condimentum eu sapien. Nulla vel dolor ac tellus vestibulum placerat
    eget a justo. In nec ante vel tortor pretium porta eu congue libero.
    Morbi vitae quam non tortor eleifend gravida. Mauris id dolor a arcu
    vulputate porttitor eget sit amet mauris. Suspendisse potenti. Cras
    fermentum urna eget magna facilisis vitae euismod neque iaculis.</p>
  <p>Quisque cursus faucibus commodo. Donec id molestie lacus. Fusce
    commodo lacus et ipsum fermentum sit amet euismod sem facilisis. Nulla
    facilisi. Donec ornare felis vitae lectus ornare suscipit. Sed tempor
    facilisis pulvinar. Vivamus mi purus, molestie in vehicula sed,
    sodales quis quam. Sed in lectus leo. Pellentesque a pellentesque
    felis. Vestibulum pretium tempor orci sed pretium. Etiam at eros nec
    odio auctor mattis. Nullam aliquam tellus sit amet est sagittis
    sagittis. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos.</p>
  <p>Donec et enim urna, quis aliquet libero. Quisque ut massa enim,
    a iaculis nisi. Aliquam erat volutpat. Proin in lorem orci. Fusce
    pulvinar, velit eu pretium venenatis, lacus lectus porttitor urna,
    quis tristique sapien mauris a est. In hac habitasse platea dictumst.
    Phasellus accumsan erat id arcu porttitor vel scelerisque elit
    vestibulum. In tellus dui, sodales eu aliquet eget, aliquet congue
    enim. Cras vel justo sodales mauris congue volutpat luctus vitae
    ligula. Suspendisse lacus sapien, ornare ut rutrum at, iaculis et
    ipsum. Fusce a turpis eros, sed facilisis nulla. Aliquam erat
    volutpat. Phasellus at libero mauris. Cum sociis natoque penatibus et
    magnis dis parturient montes, nascetur ridiculus mus. Mauris
    scelerisque accumsan tempor.</p>
</body>
</html>

The code above is rendered as follows: