ansaurus

Question

Answer 1

A:

Put the image and the content in a div, and ~~float all these divs to the left.~~ use inline-block as display and whitespace: no-wrap.

<html>
<head>
<style type="text/css">
#container {
    white-space: nowrap;
}
.image {
    display: inline-block;
    width: 150px;
}
.comment {
    display: block;
    white-space: normal;
}
</style>
<div id="container"><p>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  ...
  ...
</p></div>

Sjoerd 2010-06-26 09:58:46

Hey Sjoerd - I'm just trying it at the moment, but skills aren't up to scratch so some researching is in order. Any tips, encase you see this before I solve it? http://www.some-things.net/storage/anna/wordpress/?page_id=49

michaelbirchall.com 2010-06-26 12:53:11

Floating to the left doesn't work, because this simply wraps if it does not fit in the screen. I've edited my question to show a solution. Basically, it uses whitespace: no-wrap to avoid wrapping, and display: inline-block to have multiple blocks on the same line. May not work in IE7.

Sjoerd 2010-06-26 14:04:28

Excellent! thanks! Can I ask - How come <div class=image needs the second <div style ? Couldn't this information be put into the .image tag in the style? I tried deleting it but it needs it for some reason?

michaelbirchall.com 2010-06-27 02:56:44

I have used this second `div style` instead of an image. You can replace this div by an image.

Sjoerd 2010-06-27 08:06:55

Ah sweet, thanks for that!

michaelbirchall.com 2010-06-28 04:24:14

ansaurus

tags:

views:

answers:

How to style a comment section in ul/li

related questions