Removing gap between Div elements - html

Question

I have a white space appearing between the two div elements
col3-2 and the_content which I have been unable to resolve.
Visit site here
You can see the white gap between the image, and the green element.
HTML - PHP:
<div id="imageslider" class="clearfix">
<?php echo do_shortcode('[advps-slideshow optset="1"]'); ?>
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<?php
$args = array( 'pagename' => 'home' );
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="the_content">
<?php the_content(); ?>
<?php edit_post_link(__('Click to edit this content','themify'), '[', ']'); ?>
</div>
<?php endwhile; wp_reset_query();?>
</div>
</div>
CSS:
.col3-2
{
float: left;
margin-left: 0%;
}
.col3-2 {
width: 100%;
font-family: 'Titillium Web', sans-serif;
}
.col3-2 h1 {
margin-right: 20px;
font-size:300%;
}
.the_content{
display: none;
}
#content {
float: left;
padding: 0 0 0%;
width: 100%;
}

Answer 1

The problem lies in an extraneous <p> tag appearing in the div.the_content tag:
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p>
...
It looks like you're pulling this in from somewhere else, so editing the code you posted probably won't help much. Simply remove the <p></p> from the source of the content.

Answer 2

As stated in a previous answer, the problem is due to the p element in the code snippet:
<div id="imageslider" class="clearfix">
...
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p> <!-- this causes the problem... -->
<div id="section1">
<p></p>
...
Removing the p could solve the problem, but since the content can be edited in the future (Wordpress is the CMS in this case), then the p could reappear if the user editing the content inserts an extra carriage return or two in a WYSIWIG inline editing window.
The issue is due to collapsing margins between the p (and the containing blocks such as .the_content) and #imageslider.
A better fix would be to force the .the_content block to start a new block formatting context, which can be triggered by using:
.the_content {
overflow: auto;
background-color: #17C2A4;
}
If you specify the background color on .the_content in addition to or instead of on #section1, then the background color will extend all the way to the bottom edge of the #imageslider block.
Reference: http://www.w3.org/TR/CSS21/visuren.html#block-formatting