html multiple columns unordered list with header

Problem

I have a unordered list that based on my Style Sheet will either have 1, 2 or 3 columns. I want to create a heading for the list and it should also respond to the screen size, so if I have 2 column list I should see 2 headings align with the list, or 3 if I have 3 columns. The list if items will be dynamic so there can be any amount of items listed. Example http://jsfiddle.net/francoist/AtX4K/1/

NOTE: the Log No Dimension (heading) in picture below is what I'm trying to add.

Result Result

CSS

    body{
     font-family: "Tahoma";
    }

    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    position: relative;
    border-bottom: 1px dotted #ccc;
    list-style: none;
    list-style-type: none;
    width: 100%;
    padding: 0;
}

ul li a {
    float: right; /* width of icon + whitespace */
    padding: 5px;
    font-size: 14px;
}

labeltotal{
    float: right;
    font-size: 24px;
}

labeldetail{
    font-size: 24px;
}
labeldetailsmall{
    font-size: 14px;
}
@media  (min-width:  480px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media (min-width:  568px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media  (min-width:  768px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}

HTML

<ul>
<li>
<labeldetailsmall>LOG000001 </labeldetailsmall><labeldetail>2,1 x2,3</labeldetail>        
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
<labeldetailsmall>LOG000002 </labeldetailsmall><labeldetail>2,1 x 2,3</labeldetail>
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
</ul>
Problem courtesy of: Francois Taljaard

Solution

I do not recommend you to use this function, as it is rife with improper programming practices and may not be that efficient.

It works fine on the first page load, but on window resize, it becomes a 'little' hectic. However, I wanted to challenge myself today and I took it on.

What this function basically does is that it gets the coordinates of all occurrences of a specified HTML tag (labeldetailsmall in this case), picks the elements closest to the top and appends a heading to each while removing the previously inserted heading elements.

The CSS is fuzzy and needs improving (for there is some overlapping of elements).

Once again, use this at your own risk... I just wanted to play with code, and ended up with this.

I just hope that you would get an idea of one way you could use to achieve what you want.


[UPDATED]

The jQuery:

function addThoseHeadings(elementTagInput, yourHEADING){ 

    var elementTag = $( elementTagInput );

    var allElementsObject = {positions : {}};

    $(elementTag).each(function( index ) {
        var theOffset = $(this).offset();
        allElementsObject.positions[index] = {
            left: theOffset.left,
            top: theOffset.top
        };
    });

    var arr = Object.keys( allElementsObject ).map(function ( key, subkey ) { return allElementsObject[key][subkey]['top']; });
    var minimumOffset = Math.min.apply( null, arr );

    $.each(allElementsObject.positions, function( indexUnwanted, valueOffsets ) {
        if( valueOffsets.top == minimumOffset ){
            var elementToAppendTo = document.elementFromPoint( valueOffsets.left, valueOffsets.top );
            $( elementToAppendTo ).before( '<span class="replaceThese" style="left:'+(valueOffsets.left)+'px;top:'+(valueOffsets.top-35)+'px;">'+yourHEADING+'</span>' );
        }
    });

}

var yourHEADING = "Log No";

addThoseHeadings( "labeldetailsmall", yourHEADING );

$(window).resize(function() {
    $( ".replaceThese" ).remove();
    addThoseHeadings( "labeldetailsmall", yourHEADING );
});

The CSS (needs working on):

span {
    display: inline-block;
    position: fixed;
}

I hope that this would be of some use to someone!

Solution courtesy of: TribalChief

Discussion

Try this:

Instead of using px(pixels) for size, try using %.

eg: font-size: 300%;

Note: % value can be increased or decreased as you need.

Discussion courtesy of: Alagu MS

This recipe can be found in it's original form on Stack Over Flow.