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

Question

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

Here is what I would like:

Here is the 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 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 remaining images, dt is above the image; but then I can not put dt in the correct position.

What is the cleanest and most semantic way to make this type of layout?

Answer 1

Updated by 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 value for dd to avoid text flow around the image. adding a minimum width to the body in most cases will not result in a wrapper on dt.

I can’t spend more time on this issue tonight. If it is not resolved, I will make another crack in the morning.

Luck

Answer 2

After a long struggle with the massive red herring, which was your HTML.

I decided to forget about using dl . I experimented with it (a lot), but I could not come up with anything that was considered acceptable. So, I changed to 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 }