How do I push a header alongside part of a container?

Question

I've got some HTML:

<div id="thing">
  <div id="contentheader">
    <h3>Header</h3>
  </div>
  <div id="contentcontainer">
    <div id="image">
      <img alt="balt" src="imagesrc">
    </div>
    <div id="body">
      <p>hegl gegl</p>
    </div>
  </div>
</div>

I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.

Perhaps an image will demonstrate better:

As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.

Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)

Answer 1

I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.

If you're open to using javascript the following non-framework snippet would work.

// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);

You could recreate this code as a neater, one-liner using jQuery or another javascript framework.