footer text moved from footer background

Question

I have a layout with html elements like section & footer. The problem is that footer is very strangely displayed: footer text (BLACK TEXT on RED BACKGROUND AT THE BOTTOM) is moved down and not displayed in footer background color. Padding property also seems to work wrongly.

fiddler

HTML code:

<section>
        <div class='post'>
          <div class='post-title>'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
            <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body </p>        
          </div>      
        </div>      
        <div class='post'>
          <div class='post-title>'> Title fo post 1</div>
          <div class='post-subtitle'>
            <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
            <div class='added-at'>10:10:00 12/12/2014</div>
          </div>
          <div class='post-body'>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body 
            Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body </p>            
          </div>      
        </div>
      </section>

      <aside>
        LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! 
        LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU!         
      </aside>     

      <footer>
          <div style="float: left"> Copyrigth TaxHug All Rights Reserved</div>
          <div style="float: right"> About Terms Privacy </div>        
      </footer>

CSS code:

  .page{
    /* center horizontally */
    margin-left: auto; 
    margin-right: auto;
    /* center horizontally */

    outline: 1px solid black;
    width: 960px;    
  }
    .blue {
      color: blue;
    }      
    .added-by {
      float: left;
      font-size: 10px;
    }

    .added-at {
      float: right;      
      font-size: 10px;
    }

    .post {
      //background-color: yellow;
    }

    .post-subtitle{
      //padding: 0 10px;      
    }

  section
  {
    padding: 10px;
    width: 800px;
    display: block;  
    //background-color: red;
    float: left;
    box-sizing: border-box;
  }

  aside
  {
    padding: 10px;    
    display: block;  
    float: right; 
    max-width: 150px; 
    background-color: yellow;
    box-sizing: border-box;
  }

  footer {
    padding: 10px;
    background-color: red;
    //box-sizing: border-box;
    clear: both;
  }
/* fix for old browsers */  
article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
    display: block;
}

CSS file code added, please mark it as good question. Thanks — Pawel, Nov 12 '14 at 14:00

score 1 · Accepted Answer · edited May 23 '17 at 12:27

This is happening because the footer is not clearing the floats on the children divs. One solution would be to clear the the floats using one of the clearfix techniques. As clear:both; doesn't always work in some scenarios. More info here and here.

Example:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

NEW HTML:

<footer class="clearfix">
   .. your code
</footer>

NEW CSS: (width 100% is needed for the footer now)

footer {
   width:100%;
}

DEMO:

http://jsfiddle.net/okfn5m6r/11/

Also, FYI, // is not a valid comment in CSS. CSS only accepts /* */ for comments.

OPTION TWO:

Remove float:left and float:right inline styles from the footer children divs. And then use this CSS. This is an alternative option if you do not want to use the clearfix approach.

footer {
    white-space:nowrap;
}
footer div {
    display:inline-block;
    width:50%;
}
footer div + div {
    text-align:right;
}

DEMO:

http://jsfiddle.net/okfn5m6r/8/

footer text moved from footer background

1 Answers1