0

I am working with the following html code:

    <div style="background-image: url('Images/banner-transparente.jpg');overflow:hidden;">
    <img src="../Images/A3_2.png" class="icones thumbnail img-circle" alt="A3" style="height:5%; width:5%;float:right;">
    <a href="#" style="float: right;" id="autenticacao">Autenticação: Kerberos </a>
    <img src="../Images/logo-trt-home.png" class="img-responsive">
</div>

JSFiddle

The problem is that the generated code image is as shown below: Image with problem

However, I would get the result shown in this figure, with the ability to move a bit the image over the background image and center the text underneath or on top of my floating image, as in the example below:

Image that I want

luciocamilo
  • 80
  • 7

1 Answers1

1

Add clear:both to the <a> style, you may also margin-right and margin-top the image to shift it a little:

 <img src="http://s15.postimg.org/ra8y0o7az/A3_2.png" class="icones thumbnail img-circle" alt="A3" style="height:5%; width:5%;float:right; margin:20px 50px 0 0;">
 <a href="#" style="float: right;clear:both;" id="autenticacao">Autenticação: Kerberos </a>

JSFiddle

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
  • Thanks @JEES, but can you explain me what this have done? – luciocamilo Oct 23 '15 at 14:40
  • 1
    @luciocamilo, you welcome, this happens often when you float elements, because the height of floated elements is not determined so they act kind of weird, for details about this issue check this link it explains it very well http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el – Mi-Creativity Oct 23 '15 at 15:57