Align DIV tag without float:left

Question

Hi all,

I have a problem with alignment of image and content in a list. Here is what my code is:

 <li> 
   <div class="small-view-image">
       <img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/>
   </div>
   <div class="small-view-content">
     <a href='../xyz.html'>XYZ</a>
   </div>                        
 </li>

The problem is I cannot use float left to align the image on left and the content on right.

This is the output I am expecting. I cannot use the float:left because, the page is multilingual. Any suggestions or ideas welcome.

Answer 1

<li>
  <div>img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/></div> 
  <a href='../xyz.html'>XYZ</a>

Note you can still apply specific style to the two elements above:

li > div {display:inline-block; width:?px}
li > a { ... }

Edited as per comments.

Answer 2

You could set the li to have position: relative and position the image and text absolutely within it.

Answer 3

Expanding on dylanfm's answer with a tweak, your CSS would be:

li {
    position: relative;
    min-height: 50px;
}

.small-view-image {
    position: absolute;
    left: 0;
    top: 0;
}

.small-view-content {
    position: relative;
    left: 40px; /* Makes room for the image */
}

This will make sure that you <li> properly pushes down other page elements if the text is taller than the image.