dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: clearfix hack, footer spans up to the top

  1. #1
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32

    clearfix hack, footer spans up to the top

    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>

  2. #2
    Join Date
    Apr 2010
    Posts
    88
    You should uncomment the clearfix div.

  3. #3
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32
    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.

  4. #4
    Join Date
    Apr 2010
    Posts
    88
    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/

  5. #5
    Join Date
    May 2013
    Location
    London
    Posts
    2
    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.

  6. #6
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32
    Quote Originally Posted by MrPaulius View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles