Странное форматирование с помощью CSS и HTML

Question

Когда я использую margin-top:-50px; для этого div, почему он делает отступ для текста в http://fluroltd.com/clients/harveys/ под ползунком, где написано «О Harveys Electrical?»

<code>#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

Это проблема float. Обычные элементы в потоке документов уступают элементам float ed, когда плавающие элементы перекрывают их. Вы можете подтвердить это, задав #news-item a clear свойство CSS, и смотреть, как отступ исчезает.

Есть исправление для этого, но это немного клудж. Используйте эти правила CSS:

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

Однако, чтобы действительно решить проблему, вам нужно найти нарушающий элемент.