Q:

Html Tab with a Close Button

I want to have a tab with the title text and a closing button in either the top right or left corner. How can I achieve this?
Picture for clarification
=============================
| X                         |
|                           |
|         Text Here!        |
=============================

Here is what I have tried so far...
<li class="tabLi ui-state-default ui-corner-top ">
            <div>
               <input type="button" name="close_tab" class="close_tab_button"/>
               <a href="<c:url value="/ex.url"></c:url>"
               title="Test"> "Text Here!"</a>
            </div>
</li>

With the following CSS
.close_tab_button {
   background-image:url("/messaging-center/resources/images/close_button.gif");   
}

Currently what happens: The button pushes down the text and tab gets big, this happens because the input and the link do not overlap. 

A:

You should give your button  position:absolute
.close_tab_button {
   background-image:url("/messaging-center/resources/images/close_button.gif"); 
   position:absolute;
   top: 5px;
   left:5px; 
}

An element that is positioned absolutely is taken out of the flow and
  thus takes up no space when placing other elements. (Article here)

Now your button won't push your text down

