Question

I’m trying to build a simple page that shows an image on the left side and a description with a listview on the right. While the seems to obey the image floating, the listview takes the 100% of the page with, overlapping the image itself.

Here’s an example: http://jsfiddle.net/NYwux/

I’ve already tried the <fieldset class=\"ui-grid-a\"> solution – it does the work, but I don’t want a perfect 50% – 50% division, but a natural floating behavior.

Is this possible?

Answer 1

HTML:

<div data-role="content">    

    <img style="float: left; max-width: 100px;" src="http://softsupplier.com/wp-content/uploads/2010/07/placeholder.png" alt="description" title="description" />

    <div id="wrap">
        <p>TEST TEXT.</p>
        <ul data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">1<sup>st</sup> Item</a></li>
        <li><a href="#">2<sup>nd</sup> Item</a></li>
        </ul>    
    </div>
    <p>TEST TEXT.</p>        
</div>

CSS:

​#wrap{margin-left:110px;}
#wrap p{margin-bottom:15px;}

I put the 15px margin on the

tag because JQM listview has a -15px margin.