# Positioning link boxes & managing backgrounds

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.

<section class="three">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</a>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet.</p>
</a>
<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;
}

.three, .five {
background: none;
}

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

float: left;
}

float: right;
}

left: 5%;
}

-

## migrated from stackoverflow.comMar 7 '13 at 18:03

This question came from our site for professional and enthusiast programmers.

Your background images in your fiddle don't load because you have to update the links to a public URL. –  Jonny Sooter Mar 8 '13 at 16:39
I anticipated that which is why I added the colour. I was more interested in the best way to apply a background to the link boxes and not to the parent section element. –  Mark Phoenix Mar 8 '13 at 17:18
I think the way you applied the background to the link boxes is correct. You can see this if you remove the background declaration from .section, the link boxes will have their respective background. –  Jonny Sooter Mar 8 '13 at 17:22

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.