Question

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. alt text http://img831.imageshack.us/img831/271/layoutd.png

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

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.