Weird formatting with CSS and HTML

Question

When I use margin-top:-50px; on this div, why does it indent the text at http://fluroltd.com/clients/harveys/ underneath the slider where it says About Harveys Electrical?

#news-item { margin-top:-50px; }

<div id="page">
<div id="slider">
            <ul>                
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li> </li>          
            </ul>
</div><!-- slider -->

<?php query_posts('category_name=Latest News&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div id="news-item">
            <h1></h1>
            <?php the_content('<br/>Read More'); ?>
        </div><!-- news-item-home -->
<?php endwhile; ?>
<?php endif; ?>

</div><!-- page -->

Answer 1

It's a float problem. Normal elements in the document flow give way to floated elements when the float elements overlap them. You can confirm this by giving #news-item a clear CSS property, and watch the indent disappear.

There is a fix for it, but it's a bit of a kludge. Use these CSS rules:

#news-item {
  clear: both;
  position: relative;
  top: -40px;
}

However, to actually solve the problem, you need to find the offending element.