CODEWITHSUNDEEP
htmlcss
user3424151
user3424151

Reputation: 11

CSS: Floating image and text to left in list item, with no text wrap beneath image

Scenario:

I have a box (300px wide by 300px tall.) I have an unordered list within this box, which has four list items. Each item consists of a thumnail image (32X32), a link link directly to the right of the thumbnail and then a string of text that's on the next line beneath the link.

Notes:

  1. I want the top of the link to be aligned with the top of the image.
  2. The string of text (which is a publication date) needs to be on it's own line, below the link (but not wrapping beneath the image.)

Current implementation:

<ul>
<li><img class="thumb" src="baby.jpg"><a href="http://example.com" class="post-link">Post link title</a><br/>Date goes here</li>
<li>And again...</li>
<li>And again...</li>
<li>And again.</li>
</ul>

And for my CSS:

img .thumb {
float: left;
 width: 32px;
 height: 32px;
display: inline;
 }

a .post-link {
 float: left;
 display: inline;
 }

Currently, my image is on its own line, and then the text is beneath it. I'm tired and cranky -- and this is only one of many bugs. Help this poor, tired guy, will you?

Upvotes: 0

Views: 761

Answers (3)

blerrr
blerrr

Reputation: 51

I think what you want like this.

<ul>
    <li><div style="float:left;"><img class="thumb" src="baby.jpg"></div><a href="http://example.com" class="post-link">Post link title</a><br/>Date goes here</li>
<li>And again...</li>
<li>And again...</li>
<li>And again.</li>
</ul>

The CSS

img.thumb {
 width: 32px;
 height: 32px;
display: inline;
 }

a .post-link {
 display: inline;
 }

Just wrap div inside the image with float inside. Others will adjust it itself

Upvotes: 0

Cup of Java
Cup of Java

Reputation: 1808

Just wrap the picture and text within a div

<ul>
<li><div><div><img class="thumb" src="baby.jpg"></div><a href="http://example.com" class="post-link">Post link title</a><br/>Date goes here</div></li>
<li>And again...</li>
<li>And again...</li>
<li>And again.</li>
</ul>

.thumb {
float: left;
 width: 32px;
 height: 32px;
display: inline;
 }

.post-link {
 float: left;
 display: inline;
 }

Fiddle (I used a black div to represent a picture, it should all work the same) : Fiddle

Upvotes: 0

justinw
justinw

Reputation: 3966

It should be img.thumb - no space; or just plain .thumb if you are only using it for the img tags, same goes for the a.post-link.

img.thumb means you are targeting an img element that has the class .thumb.

img .thumb means you are targeting elements with the .thumb class that have parents that are img elements.

CSS selectors for reference.

Upvotes: 1

Related Questions