Service box

by matmat

HTML

<div class="servicewrapper">
    <div class="servicebox">
        <div class="service1-1">
            <div class="servdescriptionwrapper">a
                <br />c
                <br />c
                <br />c
                <br />c</div>
        </div>
        <div class="service1-2">
            <div class="wrappertable">
                <div class="row1 h40">
                    <div class="cl2 cBOR">Localité</div>
                    <div class="cl2 lh40">69200 / Charentay</div>
                </div>
                <div class="row1 h40">
                    <div class="cl2 cBOR">Taux horaire TTC</div>
                    <div class="cl2">Sur devis</div>
                </div>
            </div>
            <div class="rowspan2 pre1 h30 lh30">Mis en ligne le 24/06/2014</div>
            <div class="rowspan2 pre2 lh30 h30"> <a id="supp.3" class="SupprimerSAAP" title="Supprimer" onclick="event.preventDefault(); return false;" href="#">

    <img alt="" style="background:transparent;" src="http://www.junkst.com/Images/Icones/Trash.png" class="h20"></img>

</a>
 <a id="edit.3" class="EditerSAAP" title="Editer annonce" onclick="event.preventDefault(); return false;" href="#">
        <img alt="" style="background:transparent;" src="http://www.junkst.com/Images/Icones/Set.png" class="h20"></img>
    </a>

            </div>
        </div>
    </div>
    <div class="undercover w30 h30 und2">
        <img src="http://www.junkst.com/Images/Icones/undercover.png" alt="Junkst" title="Junkst" class="" />
    </div>
</div>

CSS

html {
    font-size:100%;
}
html, body {
    height: 100%
}
.h60 {
    height:60px;
}
.h40 {
    height:40px;
}
.h40 {
    line-height:40px;
}
.w40 {
    width:40px;
}
.h30 {
    height:30px;
}
.lh30 {
    line-height:30px;
}
.h20 {
    height:20px;
}
.lh20 {
    line-height:20px;
}
.servicewrapper {
    position:relative;
    width: 800px;
    margin:auto;
}
.servicebox {
    display: table;
    width:100%;
    border-spacing:10px 0px;
    height:100%;
}
.servicebox:first-child {
}
.servicebox > div {
    display: table-cell;
    position: relative;
    color: #777;
    text-align: center;
    vertical-align: middle;
    border-spacing:0px 0px;
}
.service1-1 {
    width:50%;
    height:100%;
    padding:10px;
    z-index: 2;
    background: #eee;
    box-sizing:border-box;
    border:1px solid gainsboro;
    position:relative;
}
.pos1 {
    top:15%;
    left:-5%;
}
.pos2 {
    bottom:0%;
    right:1.1%;
    z-index:10;
}
.servdescriptionwrapper {
    height:100%;
    background:white;
    text-align:left;
    padding:2%;
    box-sizing:border-box;
    max-height:140px;
    overflow:auto;
}
.service1-2 {
    width: 100%;
    z-index: 1;
    background:;
    border:1px solid gainsboro;
    padding:10px;
}
.rowspan2 {
    display:block;
}
.rowspan2 a {
    display:inline-block;
}
.rowspan2 a:last-child {
    margin-left:5%;
}
.cBOR {
    color:#990000;
}
.row1 {
    background:whitesmoke;
    vertical-align:middle;
    width:100%;
    display:table-row;
}
.cl1 {
    display:table-cell;
    vertical-align:middle;
    width:40%;
}
.pre1 {
    font-size:0.9rem;
    font-style:italic;
}
.cl2 {
    display:table-cell;
    vertical-align:middle;
}
.cl2 p {
    display:block;
    height:20px;
    padding:0;
    margin:0;
}
.cl2 img {
    margin-left:3%;
}
.price {
    color:#FF7000;
    font-family:Georgia;
    font-size:1.3rem;
}
.row2 {
    display:block;
    background:white;
    width:100%;
}
.wrappertable {
    display:table;
    width:100%;
    border:1px solid...