switched out HTML for php- caused minor layout issues, unsure how to fix [closed] - php

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this 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(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></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(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></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

Answer 2

You have use ids more than once and it's messing with your page. This will generate errors that search engines will use to rank you lowly. Check http://validator.w3.org/ to see for yourself.
Also you have id recent with a top border and you use the div several times. Try changing recent to a class and then change the "recent" div containing the two to a class without a border on the top.

Answer 3

Just post what the output looks like with the dynamic PHP and then the hard-coded HTML version, and compare them side by side. Whatever is different between them is the answer.