Question

Without changing the HTML structure:

<div id="container">
  <header>
    <h1>This is the Heading Which May be Long and Span Lines</h1>
  </header>
  <section>
    <div class="thumb">
        <img></img>
    </div>
    <div class="content">
      <p>Content</p>
      <p>continues</p>
      <p>and wraps around the thumb</p>
    </div>
  </section>
</div>​

I need to style this so that the img.thumb floats left, and the header h1 hangs to its right, and may wrap lines. The h1 should be left-justified:

+------------+   Heading Text which May Be Long and
|            |   Thus would Span Lines
|   thumb    |
|            |   Content
+------------+   continues
and wraps around the thumb.

The layout (i.e. width of the heading and content) should fluidly adapt for width of the container. (The thumb is fixed width.)

Any way to achieve this with CSS3 without changing the order of the elements? I can do this by fixing the width of the right column, but is there a way to specify “use the remaining space to the right of the float as the width”? (Without javascript, less, etc.)

Fiddle here: http://jsfiddle.net/agRx3/1/

Answer 1

Since the thumb has a fixed width, you can use position: absolute to fix the location of the image. The header and content can then have margin-left which is slightly more than the thumb width

Fiddle: http://jsfiddle.net/SJvav/

Edit: To have the content wrap around the margin, let for the image and the text float:left and give the image a negative margin so its right beside the h1 http://jsfiddle.net/SJvav/2/