Image inside <li> tag

css, css-float, html

Solution

I would rewrite your example like this:

<li>
    <div style="float: left;">
        <img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg">
    </div>
    <div style="float: left;">
        <p>2013 Toyota Tacoma</p>
        <p>Price : 450000$</p>
        <p>Year : 2013</p>
        <p><a href="/item/index/63">more</a></p>
    </div>
    <div style="float: none; clear: both;"></div>
</li>

This is written with inline-style CSS attributes, which I usually tend to avoid, but as in your example, I wrote it like you did - inline.

Problem

I have a question about floating elements inside of `<li>` tag. I have following markup ``` <li> <img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg" style="float:left"> <p>2013 Toyota Tacoma</p> <p>Price : 450000$</p> <p>Year : 2013</p> <p><a href="/item/index/63">more</a></p> </li> ``` In FF, IE works fine, but in Chrome list numeration floats image too. How to fix it? Thanks

Original source