Question

I’m currently struggling to present a div structure in a certain way. Unfortunately I can only do this via css as our database system outputs the html. Basically I am trying to present the code below in the format shown in the picture:

<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>

Class type refers to the darker heading on the left and class_value refers to the content.

Do any of you have any recommendations of how to acheive this via css? Any help would be greatly appreciated. JQuery and javascript can be used to append classes where necessary if required.

Answer 1

http://jsfiddle.net/NVDjU/

Using your uploaded image as an example, this method uses floats and arbitrary widths that you can change, but may do the trick.

.job_classifications {
    width: 420px;
    font-size: 11px;
    font-family: Arial;
}

.classification {
    float: left;
}

.classification .class_type {
    font-weight: bold;
    width: 80px;
    float: left;
}

.classification .class_value {
    float: left;
    margin: 0 10px 0 0;
    width: 100px;
}