Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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%;
}
share|improve this question
    
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
add comment

migrated from stackoverflow.com Mar 7 '13 at 18:03

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

1 Answer

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.

share|improve this answer
    
Thanks, I'll give that a try on the site. –  Mark Phoenix Mar 9 '13 at 16:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.