Q:

Wrapping -- don't break up paragraphs

I have a pretty standard page layout where there's an image floated to the left, and then some information to the right of it, that consists of 1 line headers (bold) and 1 line of data underneath each header. 
I want the data to flow around the image, but is there any way I can stop the data from breaking from the header that goes with it when it wraps? I.E. only wrap between a line of data and the next header. 
Seems simple, but I haven't been able to come up with a way to do it!
Edit: here is a jsfiddle to illustrate my situation (cool site!): http://www.jsfiddle.net/qYcX5/
See the last paragraph is broken apart from its header. 
BTW, on the actual page I'm building, the length of paragraphs on the right and the # of items will vary, so I can't arbitrarily decide to clear the data at a certain point and always have it look right.

A:

I know this is an old question, but so the answer's out there... 
I think the easiest way to do this would be to wrap the header/paragraph pairs in a div or section element and then set them to overflow:hidden - 

div#parent-block {
  width: 600px
}

div#parent-block img {
  width: 350px;
  height: 200px;
  float: left;
  margin-right: 8px;
}

section {
  overflow: hidden;
}

h3 {
  font-weight:bold;
}

p {
  margin-bottom: 5px;
}
<div id="parent-block">
  <img src="http://placehold.it/350x200">
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
</div>

http://jsfiddle.net/mrbh/cyjvspLs/2/

