Force a div to top of another div within a container

Question

Probably a really simple question but I'm getting fed up of tinkering around trying to implement this myself. The problem is i'm working with pre-generated html code that comes from our software offering and cannot therefore just move one div above the other in html. I therefore have to do it in css.

  <div class="job_description">
    <h1>Web Developer (.Net/Mobile)</h1>
    <div class="job_summary">
       <p>
     Some text here
    <br>
    <br>
     Some text here
       </p>
    </div>

    <div class="job_classifications">
        <div class="classification x_location">
           <div class="class_type">Location</div>
           <div id="location" class="class_value"> London</div>
        </div>

         <div class="classification refno">
           <div class="class_type">Ref No</div>
           <div class="class_value">80</div>
        </div>
  </div>

Bascally I would like job_classifications to appear above job_summary. Then within job_classifications I need each of the different classifications to be displayed together in a grid format.

Any ideas?

Answer 1

Something like this will probably do the trick, though it may need to be tailored a bit depending on how exactly the content looks. Using jQuery:

$(".job_classifications").prependTo(".job_summary");

Here's an example http://jsbin.com/aqukez/1/edit

Answer 2

Positioning the parent job_description as relative, and the children as absolute should give the effect you are looking for.

The main point of this approach is positioning positions against the closest positioned parent.

Answer 3

http://jsfiddle.net/TxgKH/3/

You can use

.job_description {
   display: table;
   caption-side: bottom;
}
.job_summary {
   display: table-caption;
}

And position absolute + js fallback for old ie.

You could do something like this :) And for ie lower than 7, there is a js fallback.