Question

I have two sections next to eachother- one is for recent work, the other for recent blog posts. Each of these sections has 3 thumbnails, under the far right of which I’d like to have a “next” button (though it will be a .png of an ellipse). I’m have difficulty getting each next button into it’s proper place without effecting the other elements.

This section has really given me some trouble today so any and all help is greatly appreciated.

**If I may also ask: I’ve been unable to give the <p><span> elements the proper padding underneath(should be 20px). How do I achieve this?

Here’s what I have currently:

Here’s what I’d like the final setup to look like:

<div id="recent">
        <div id="recent-work">
            <p><span>Recent Work</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <div class="next">
                <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
            </div><!-- end next -->
        </div><!-- end recent-work -->

        <div class="divider">
            <img src="img/divider.png" alt="Section divider" />
        </div><!-- end divider -->

        <div id="recent-blog">
            <p><span>Recent Blog</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <div class="next">
                <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
            </div><!-- end next -->
        </div><!-- end recent-blog -->
    </div><!-- end recent -->

and

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-blog {
    display: block;
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent #recent-blog .next{
    float: right;
}

Answer 1

You can try to use position: absolute; to get the “next button” exactly where you want. Try this:

HTML

<div id="recent">
    <div id="recent-work">
        <p><span>Recent Work</span></p>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>

        <div class="next">
            <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
        </div><!-- end next -->

     </div><!-- end recent-work -->

     <div class="divider">
        <img src="img/divider.png" alt="Section divider" />
     </div><!-- end divider -->

     <div id="recent-blog">
        <p><span>Recent Blog</span></p>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>

        <div class="next">
            <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
        </div><!-- end next -->

     </div><!-- end recent-blog -->
</div><!-- end recent -->

CSS

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next{
position:absolute;
bottom:-15px;
right:0;
}

Hope it can help you!