Выровнять тег DIV без поплавка: слева

Question

У меня проблема с выравниванием изображения и содержимого в списке.Вот то, что мой код:

 <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>

Проблема в том, что я не могу использовать float left для выравнивания изображения слева и содержимого справа. alt text http://img831.imageshack.us/img831/271/layoutd.png

Это ожидаемый вывод.Я не могу использовать float: left, потому что страница многоязычна.Любые предложения или идеи приветствуются.

Answer 1

Расширяя ответ dylanfm с помощью твика, ваш CSS будет:

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 */
}

Это обеспечит правильное нажатие <li> на другие элементы страницы, если текст будет выше изображения.

Answer 2

Вы можете установить для li значение position: relative и расположить изображение и текст абсолютно внутри него.

Answer 3

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

Обратите внимание, что вы все еще можете применить определенный стиль к двум элементам выше:

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

Отредактировано в соответствии с комментариями.