Search code examples
htmlcsspositioningcss-float

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

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:

Is this possible with CSS?

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)

Solution

  • Thirtydot's answewr in the comments section solved my issue.