Positioning link boxes & managing backgrounds

Question

I've managed to position the link boxes as I wanted and to apply a background to them, but I'm not sure I've done it in the most elegant or efficient way.

Is there a better way to position the elements without mixing positioning and floats? And is there a way to remove the background between the link boxes without having to turn it off in the section and turn it on again for the boxes? Or any other suggestions?

I've only been coding for a few months, but I aspire to write nice shiny code.

jsfiddle link

<section class="three">
    <a href="#"class="left-link link-box">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </a>
    <a href="#"class="middle-link link-box">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </a>
    <a href="#"class="right-link link-box">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </a>
</section>

section {
    width: 1000px;
    margin: 1em auto;
    background: #C3C3C3 url(images/background.png);
    overflow: hidden;
    border-radius: 5px;
}

.three, .five {
    background: none;
}

.link-box {
    position: relative;
    display: block;
    float: left;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    width: 300px;
    background: #C3C3C3 url(images/background.png);
}

.left-link {
    float: left;
}

.right-link {
    float: right;
}

.middle-link {
    left: 5%;
}

Answer 1

I edited your fiddle jsFIddle. Basically what I have done is removed position:relative and added float:left and then added some margin to the elements. Then with the last-child selector I removed margin from the last item.