Image positioning over an included html file

Question

I am trying to pin an image to the top right corner over some included content.

<div class="panel-body helpContent">
   <img src="/images/myImage.png" class="beta" />
   <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
</div>

The image is just a small little badge in the corner, about 150px x 150px.

The beta class looks like this:

.beta{
   position:absolute;
   top:0px;
   right:15px;}

Problem is that the image sits on top of the content in some of the HTML files. Not all of them, mind you. But the ones with a really long header at the top.

What I'd like is for the html content to wrap so it doesn't hit it. I could do that if I included the image in every single HTML file but I'd rather just include it once if possible.

Is there a creative solution to this that doesn't require the image on every page?

Thanks for any helpful tips.

Answer 1

Have you tried float right?

<div class="panel-body helpContent">
    <img src="/images/myImage.png" class="beta" />
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
    <div class="clear"> </div>
</div>

.beta {
  float:right;
}

.clear {
  clear: both;
}

Answer 2

try this

<div class="panel-body helpContent">
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
    <img src="/images/myImage.png" class="beta" />
</div>

and

.beta{
     position:absolute;
     top:0px;
     z-index: 1000;
     right:15px;}