CODEWITHSUNDEEP
cssjquery-mobilelayout
susie derkins
susie derkins

Reputation: 584

align text to right of image in jqm listview

See the jsFiddle here: http://jsfiddle.net/9apNs/

I am trying to display a series of items in a listview in JQM. I am customizing it with certain behavior on taps/clicks.

What I am trying to do now should be quite simple - align an image on the left and a few chunks of text on the right. I've got it working using %ages for width, but I would much prefer that the text was immediately adjacent to the image, no matter the image size or how much the screen expands or shrinks. Images will be fairly small (~50 pixels in width and height).

It makes more sense if you look at it on jsFiddle (to see it in context with rest of JQM listview), but here is the code:

<li>
    <div class="entire">
      <div class="date">23 November 2013</div>

    <div class="image">
      <img src="http://vogelsangpeststl.com/wp-content/uploads/2013/02/House_mouse-50x50.jpg"/>
    </div>
    <div class="text">         
      <div class="first">ID - Short</div>


      <div class="second">
        Slightly-longer ID - may possibly be two lines.
      </div>
      <div class="notes">
        Notes could really be quite a lot of text.  Usually just a line or two,
        but could be quite long.  In that case, want to keep image on left and have
        text fill up the rest of the space
      </div>
    </div>
    </div>

  </li>

And here's the css

.entire {
  position: relative;
  width: 100%;
  border: 1px solid red;

}
.text {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  border: 1px solid blue;
}
.image {
  display: inline-block;

  vertical-align: middle;
  width: 25%;
  height: 100%;

  border: 1px solid green;
}


.first {
  font-weight: bold;
  font-size: larger;
}
.date {
  position: absolute;
  right: 0px;
}

.second{
  font-weight: normal;
}
.notes{
  font-style: italic;
  font-size: smaller;
}

Upvotes: 0

Views: 632

Answers (1)

otherDewi
otherDewi

Reputation: 1098

The <div class="image"> is unnecessary. Take the <img> tag out of its container and float all elements inside the .entire container. I also recommend you change your first, second and notes div to h3, h4 and p tags respectively. this is semantically a better way to code, improving readability and SEO of the page.

HTML

<ul class='slats'>
<li class="entire">
  <img src='http://placekitten.com/80/80' />
  <h3>sub heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
...

CSS

li{ clear:left; margin-top:1em;}
img{float:left;}
.text{float:left;}

Upvotes: 1

Related Questions