Question

When 5 (the maximum) entries are created, the layout works as intended and looks like this:

However, if there are less entries, the layout gets all messed up:

What might be causing this issue? The PHP code generating each entry is the following:

echo '<div class="st_decor sk_decor rounded" style="clear:both">
',$v['name'],' of ',$l['serv_'.$serv[$v['server']]],'
<a style="float:right;margin-left:1em" href="delete/character/',$v['id'],'/">
<img src="img/x.png" alt="',$l['delete'],'"></a></div>';

And the CSS classes used are:

.rounded {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px}

.st_decor{
    border-left-style:groove;
    border-width: 0 0 0 2px;
    margin-left: 15px;
    font-size:10px;
    padding: 3px}

.sk_decor{border-left-color:#ffdf8c}    
.sk_decor:hover{background-color:#333333;}

Any help is highly appreciated.

Answer 1

And I have found a solution: the image simply needs to be put before the text:

echo '<ul class="st_decor sk_decor rounded" style="clear:both">
<a style="float:right;margin-left:1em" href="delete/character/',$v['id'],'/">
<img src="img/x.png" alt="',$l['delete'],'"></a>
',$v['name'],' of ',$l['serv_'.$serv[$v['server']]],'
</ul>';