How to fix Div overlapping?

Question

I have a situation with X number of divs as below:

"<div style="position: absolute; left: 327.507px; top: 42.3433px;" class="point-label">25.49</div>
<div style="position: absolute; left: 323.738px; top: 60.8532px;" class="point-label">21.04</div>
<div style="position: absolute; left: 322.821px; top: 64.6363px;" class="point-label">20.14</div>"
.
.
.

They have auto-generated fixed positions which I can't do much about it. The problem is sometimes they overlapp, look at the example here: http://jsfiddle.net/Rawand/WswD3/

The question is: can the overlap be solved by CSS? otherwise by javascript? I want them to be placed above eath other with minimum position changes possible, as in the image link: i.stack.imgur.com/xbqHI.jpg

Answer 1

As I understood you, I guess you can change the position of DIVs using Jquery

for example set a class 'p1'

<div style="position: absolute; left: 327.507px; top: 42.3433px;" class="point-label p1">25.49</div>

then :

$('.p1').each(function(){
    $(this).next('div').css({'left' : parseInt($(this).css('left')) + parseInt($(this).css('width')) + 'px'})
});

Answer 2

I would submit this as a comment (but can't due to lack of rep). Follow what Ravi says and I wouldn't use decimals with pixels, instead use decimals with ems, rems and percentages.

Answer 3

Here is a javascript solution to line them up. It's not particularly elegant, and could be done in a simpler fashion in jQuery, but it stops them overlapping and makes them somewhat uniform.

http://jsfiddle.net/WswD3/7/

function removeAtt(){
    var elems = document.getElementsByClassName("point-label");

    for(i in elems){
        elems[i].removeAttribute("style");
        elems[i].style.position = "relative";
        elems[i].style.left = "323px";
    }
}

removeAtt();