How to reverse the float order of heading & body with CSS?
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.)
Fiddle here: http://jsfiddle.net/agRx3/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
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