Weird formatting with CSS and HTML


April 2019


72 time


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

#news-item { margin-top:-50px; }
<div id="page">
<div id="slider">
                <li> </li>          
</div><!-- slider -->

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

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

1 answers


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.