How to reverse the float order of heading & body with CSS?


Tags: css,layout,css-float

Problem :

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/



Solution :

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/


    CSS Howto..

    How to combine bold and italic in CSS?

    How to move this circle using javascript?

    How to change CSS to the same class but another input name

    How to stop divs moving under each other when zooming out

    contenteditable does not show pseudoselector :before in safari

    how to make div with image like below in html and css

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to make this styling with css

    How to change url of image which is generated dynamically just by using CSS and media queries?

    How can I get these two divs to appear close to each other vertically?

    How to enable overflow scrolling within a Semantic Ui Grid?

    How to put a list of images in a fixed div

    How to convert a 'div' into a dropdown using CSS/Jquery

    show html element before sending ajax sync request

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    how to avoid css jitters while applying css border with hover pseudo class

    How to fit 25 divs inside one div when I have more than 25 child divs?

    How to debug CSS/Javascript hover issues

    How to load a new stylesheet when switching from JQuery Mobile site to PC site

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    css menu active sub links to show on parent link

    How to center modal window in css+html?

    How to keep a navbar toggle open until selection is made

    How To create slider/toggle to change font size on screen with HTML CSS JS [closed]

    How to make a div to fit all available width even hidden with scroll?

    How do I draw the lines of a family tree using HTML CSS?

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to draw lines in ionic

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    How can I inline the label with the input horizontally and the inputs vertically