Почему пули моего элемента списка перекрывают плавающие элементы

Question

У меня есть страница (XHTML Strict), где я размещаю изображение рядом с обычными абзацами текста. Все идет хорошо, кроме случаев, когда список используется вместо абзацев. Пули списка перекрывают всплывающее изображение.

Изменение поля списка или элементов списка не помогает. Поле рассчитывается с левой стороны страницы, но с плавающей точкой элементы списка перемещаются вправо внутри самого li. Таким образом, поле помогает, только если я сделаю его шире, чем изображение.

Плавающий список рядом с изображением также работает, но я не знаю, когда список находится рядом с плавающей точкой. Я не хочу размещать каждый список в моем контенте только для того, чтобы это исправить. Кроме того, плавающее влево портит макет, когда изображение перемещается вправо вместо левого списка.

Установка li { list-style-position: inside } действительно перемещает маркеры вместе с содержимым, но также заставляет линии, которые переносятся, начинаться с маркером, а не с линией выше.

Проблема, очевидно, вызвана тем, что пуля выводится за пределы коробки, а поплавок толкает содержимое коробки вправо (не саму коробку). Вот как IE и FF справляются с ситуацией, и, насколько я знаю, не ошибаются в соответствии со спецификацией. Вопрос в том, как я могу это предотвратить?

Answer 1

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto приведет к выравниванию самого элемента по правому краю. Установите высоту и ширину элемента, который вы хотите - по моему это фоновое изображение в div внутри

Answer 2

Как насчет этого?

ul{float:left; clear:right}

Answer 3

Вы также можете попробовать плавать ul влево и определить для него соответствующий width, чтобы он плавал рядом с изображением.

Что-то вроде этого jsfiddle ?