Question

Live site.

Ideally, between border-top and border-bottom, I’d like to have 3 portfolio thumbnails, a divider(.png), and 3 blog thumbnails. Below the far right of each section should be ‘…'(next.png).

Currently, there is a random border directly on top of “Recent Work” that shouldn’t be there and the ‘…’ button for ‘Recent Blog’ is below the border-bottom. What is causing this/how do I remedy?

Everything was fine before I switched out the HTML for php..

<?php if ($portfolio_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-work">
                    <p><span>Recent Work</span></p>
                    <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/blog/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-work -->
        <?php endif; ?>

            <div class="divider">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/divider.png" alt="Section divider" id="divider" />
            </div><!-- end divider -->

        <?php if ($blog_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-blog">
                    <p><span>Recent Blog</span></p>
                    <?php while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/work/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-blog -->
        <?php endif; ?>

&

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

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

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

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    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 {
    padding-bottom: 20px;
}

#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: -40px;
    right: 0px;
}

Answer 1

Try adding a closing </div> to close your first <div id="recent">

I think you are unintentionally nesting <div id="recent">....<div id="recent"> without closing either of them