Unwanted space between divs - php

Question

I am trying to get three images to connect for my content box but for some reason there is some space between the second and the third. Any help would be appreciated.
here is the site: http://hyvhuynh.com/hyperbolical-blog
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class();?> id="post-<?php the_ID();?>">
<div id="mythreedivs">
<div id="top">
</div>
<div id="mid">
<h2 class="post-title"><?php the_title(); ?></h2>
<ul class="meta">
<li><?php the_time('F j, Y'); ?></li>
</ul>
<div class="postcontent">
<?php the_content(the_title('', '', false)." - continue reading"); ?>
</div>
<ul class="meta postfoot">
<?php if('open' == $post->comment_status) : ?><li class="comment_link"><?php comments_popup_link('Comment on '.$post->post_title, '1 Comment on '.$post->post_title, '% Comments on '.$post->post_title,'postcomment','Comments are off for '.$post->post_title); ?></li><?php endif;?>
<?php if(get_the_tag_list()) :?>
<li>Tags: <?php the_tags('<ul><li>',',</li> <li>','</li></ul>');?></li>
<?php endif;?>
</ul>
</div>
<?php endwhile; ?>
<ul class="prevnext">
<li><?php next_posts_link('« Older Posts'); ?></li>
<li><?php previous_posts_link('Newer Posts »');?></li>
</ul>
<div id="bottom">
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
---------css---------------
#mid {
background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodymiddle.png');
width:806px;
}
#bottom {
background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodybottom.png');
width:806px;
height:27px;
}
#header {
width:800px;
float:right;
margin:0 0 50px 0;
}
/*
Navigation Bar Time!
*/
#jsddm
{ margin: 20px 0 0 0;
padding: 0;
font-weight:bold;
text-shadow: #000000;
}
#jsddm li
{ float: left;
list-style: none;
font: bold 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #E7E7EF;
padding: 5px 12px;
text-decoration: none;
border: 1px solid #555555;
width: 70px;
color:#000000;
white-space: nowrap}
#jsddm li a:hover
{ background: #1A4473}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #E7E7EF}
#jsddm li ul li a:hover
{ background: #1A4473}
/*
End Navigation Time!
*/
.logo {
float:right;
}
#content .post {
float:left;
width:800px;
}
#content .page,#content .attachment,.postcontent {
width:800px;
text-decoration:none;
}
.photo {
width: 250px;
height:700px;
background-color:#000000;
margin:0 0 0 880px;
}
.slideshow { height: 232px; width: 232px; margin:0 0 0 880px; }
.slideshow img { border: 5px solid #000; }
.post-title {
margin:0;
padding:0;
text-align:center;
}
.post-title a {
text-decoration:none;
color:#000000;
}
.post-title a:hover,.post-title a:active,.post-title a:focus {
text-decoration:underline;
color:#5F625F;
}
#content .meta li,#content .prevnext li,#content .gallery li {
list-style-image:none;
list-style:none;
}
.meta {
margin:5px 0 0;
padding:0;
font-size:.85em;
}
.meta ul,.meta li {
margin:0;
padding:0;
}
.meta ul {
display:inline;
}
.meta li li {
display:inline;
padding-right:.3em;
}
.postfoot {
clear:both;
padding-bottom:10px;
line-height:1.2em;
}
.author .posts-by {
padding-top:10px;
}
.clearfix {
display: inline-block; }
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
clear:both;
margin:0 auto;
padding:0 0 5px;
text-align:center;
font-size:.8em;
border: 0;
width:800px;
height:200px;
}
#footer ul {
clear:both;
margin:0;
padding:0;
}
#footer li {
display:inline;
margin:0;
padding:0 5px;
}
#footer li.rss {
position:relative;
top:3px;
}
.copyright {
}
.copyright a
{
}
.copyright a:hover
{
}
.postcontent p {
text-decoration:none;
border:0;
border-style:none;
}
.postcontent p a:hover {
color:#fff;
}

Answer 1

The space is from the margin on your unordered list. Add this to your stylesheet
ul.prevnext {margin: 0px;}
And it'll correct it. I'm not sure what you're doing with it though, so you may want to just scrap it for now because once you add any items, it will pop up again. Or move it to a different position as mltsteeves mentioned.

Answer 2

<ul class="prevnext"> is causing the space between the two divs, try putting it inside the previous div.

Answer 3

You have nesting errors in your markup. I would sort them out first, from what I can see in Firebug, it might already sort it out.
end tag for "div" omitted, but OMITTAG NO was specified
end tag for "ul" which is not finished

Answer 4

The block below:
<ul class="prevnext">
<li></li>
<li></li>
</ul>
is not contained inside the proper <div> tag, it is between your mid and bottom divs.