clearfix hack, footer spans up to the top

**FernandoBasso** · 01-26-2013 05:46 PM

I cannot understad why this code doesn't prevent the footer from spanning up to the top with the clearfix hack. It does work with the overflow hidden technique, and also with the div with clear both.

http://jsfiddle.net/Nz9ya/2/

The yellow background is from the footer, but as it can be seen, it goes up to the top.

HTML Code:

<!DOCTYPE HTML>
<html lang='pt-br'>
  <head>
    <meta charset='UTF-8'>
    <title>CSS</title>

    <style>
        body {
      }
      header {
        padding: 1em 0 1em 0;
        text-align: center;
        background-color: maroon;
      }
      .container {
        width: 600px;
        margin: 0 auto;
        background-color: #C0C0C0;
      }
      nav {
        width: 200px;
        float: left;
      }
      section {
        /* overflow: hidden; */
        width: 399px;
        float: left;
        border-left: 1px solid yellow;
        border-bottom: 1px solid blue;
      }
      footer {
        background-color: yellow;
        text-align: center;
        padding: 1em 0 1em 0;
      }
      .cf:before, .cf:after {
          content: '';
          display: block;
          clear: both;
          /* height: 0; */
          /* visibility: hidden; */
      }
      .cf {
          /* for IE/Mac */
          /* display: inline-block; */
      }
    </style>

  </head>

<body>

  <div class='cf container'>
    <header>
      <h1>The Header</h1>
    </header>

    <nav class=''>
      <ul>
        <li>Master Yoda</li>
        <li>Jedi Masters</li>
        <li>Lord Sith</li>
        <li>Jedi Tux</li>
        <li>EyeOfTruth</li>
        <li>Athunye GoTek</li>
        <li>Hello World</li>
      </ul>
    </nav>

    <section class='cf'>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer iaculis
      tincidunt velit. Integer malesuada velit ut sapien congue...</p>
  </section>

  <!--
  <div style='clear: both;'></div>
  -->

  <footer class=''>
    <p>This is the footer &copy; 2013</p>
  </footer>
</div>
</body>

**gvre** · 02-02-2013 11:58 AM

You should uncomment the clearfix div.

**FernandoBasso** · 02-02-2013 04:55 PM

Yeah, that is one thing that always work. I also found out that clearing the footer also works in this case. What I can't understand why appying the cf class to the footer doesn't work.

**gvre** · 02-03-2013 04:16 AM

I don't now. I use the oldschool technique

You may find a solution in one of the following pages.

http://nicolasgallagher.com/micro-clearfix-hack/
http://www.css-101.org/articles/clea...fix-so-far.php
http://themergency.com/css-clearfix-demystified/

**MrPaulius** · 05-04-2013 02:49 AM

could someone explain, why this new hack for clearing divs cf:after and cf:before is better than the oldie: div { clear:both } ?

Old hack is much shorter, plus it works on all browsers nowadays..
The only pro I see on new is that with .class you can target few divs.

**FernandoBasso** · 05-04-2013 05:20 PM

Originally Posted by MrPaulius

could someone explain, why this new hack for clearing divs cf:after and cf:before is better than the oldie: div { clear:both } ?

Old hack is much shorter, plus it works on all browsers nowadays..
The only pro I see on new is that with .class you can target few divs.

I personally don't think it is better. I just think each one has its pros and cons. The clear fix technique frees one of having to write additional markup just for presentation, but I don't think that is a big deal anyway.

Thread: clearfix hack, footer spans up to the top

Thread Tools

Display

clearfix hack, footer spans up to the top

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions