CODEWITHSUNDEEP
htmlcss
KatieK
KatieK

Reputation: 13853

How can I get images floated to the left of other definition list elements?

How can I get these dd images floated next to the dt and other dd elements in a dl?

Here's what I'd like:

screenshot

Here is a JSFiddle, and here is the markup:

<dl>
  <dt>Bacon ipsum</dt>
  <dd class="img"><img src="http://placekitten.com/100/100" width="100" height="100" /></dd>
  <dd>Bacon ipsum dolor sit amet pork chop magna pork, tempor in jowl ham labore rump tenderloin pariatur pancetta tri-tip pork loin. Spare ribs meatloaf ground round chicken, non esse cow. </dd>
  <dt>Irure Jowl</dt>
  <dd class="img"><img src="http://placekitten.com/101/100" width="100" height="100" /></dd>
  <dd>Irure jowl non, chicken dolor veniam id in shoulder voluptate. Eu fugiat jowl, sunt drumstick id ad shankle shank aliquip bresaola aliqua reprehenderit. Fugiat shank pariatur strip steak laborum pork chop. Beef ribs aliquip fugiat, shankle id pork loin.  </dd>
  <dt>Biltong labore turkey</dt>
  <dd class="img"><img src="http://placekitten.com/100/1002" width="100" height="100" /></dd>
  <dd>Biltong labore turkey swine dolor short ribs minim. Fugiat beef consectetur, sirloin do ham meatloaf hamburger pariatur jowl swine ham hock.</dd>
</dl>

And the CSS:

dt
  { margin: .75em 0 .25em 0;
    font-weight: bold;
    }

dd
  { margin: .25em 0;
    }

dd.img
  { margin: 0 .25em 0 0;
    }

img
  { border: solid #666666 1px;
    padding: 3px;
    }

If I just float the images left, the dt is above the image; but then I can't float the dt into the correct position.

What's the cleanest and most semantic way to do this type of layout?

Upvotes: 7

Views: 600

Answers (2)

thirtydot
thirtydot

Reputation: 228192

After struggling for a while with the massive red herring that was your HTML..

I decided to forget about using a dl. I did experiment with it (a lot), but I couldn't come up with anything that I deemed acceptable. So, I've changed to a ul.

See: http://jsfiddle.net/8xPRZ/1/

HTML:

<ul>
    <li>
        <img src="http://placekitten.com/100/100" width="100" height="100" />
        <h4>Bacon ipsum</h4>
        <p>Bacon ipsum dolor sit amet pork chop magna pork,  tempor in jowl ham labore rump tenderloin pariatur pancetta tri-tip pork  loin. Spare ribs meatloaf ground round chicken, non esse cow.</p>
    </li>

    ..
</ul>

CSS:

li {
    margin: 0 0 .5em 0;
    overflow: hidden;
}
li > img {
    border: solid #666 1px;
    padding: 3px;
    float: left
}
li > h4, li > p {
    overflow: hidden;
    display: block;
    padding: 0 0 0 .5em
}
li > h4 {
    font-weight: bold;
    margin: 0 0 .5em 0
}

Upvotes: 4

matchew
matchew

Reputation: 19645

Updated http://jsfiddle.net/PkwaP/

/* only showing the additions */
body { min-width: 400px; } /* change to appropriate value */
dt { clear: left; margin-left: 116px; }
dd { margin-left: 116px; }
img { float: left; margin-top: -1.25em; margin-right: 10px; }

added margin-left to dd to avoid the text wrap on the image. adding a min-width to the body will avoid wrapping on the dt in most cases.

I cannot spend any more time on this question tonight. If it is not solved I will take another crack at it in the morning.

Good Luck

Upvotes: 4

Related Questions