Skip navigation
Gar7
Currently Being Moderated

Clearfix question

Jan 28, 2014 9:56 PM

So i am using a clear fix, but it is adding unwanted space between two divs. Is there a way to remove the space? and keep the clear fix.

 

html

 

<body>

        <!-- Pushy Menu -->

        <nav class="pushy pushy-left">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Work</a></li>

                <li><a href="#">Contact</a></li>

            </ul>

        </nav>

 

 

        <!-- Site Overlay -->

        <div class="site-overlay"></div>

 

 

        <!-- Your Content -->

        <div id="container">

            <!-- Menu Button -->

            <div class="menu-btn">&#9776;</div>

 

 

    <header class="full">

      Logo Page

    </header>

 

 

    <div class="full">

      Name Page

    </div>

 

 

    <div class="third col1">

      Conceptual

    </div>

 

    <div class="third col2">

      Architectural

    </div>

 

 

    <div class="third col3">

      Minimal

    </div>

 

 

    <div class="clearfix"> </div>

 

 

    <footer class="full">

      Copyright

    </footer>

 

 

 

 

        </div>

 

 

        <!-- Pushy JS -->

        <script src="js/pushy.min.js"></script>

 

 

    </body>

 

 

css

 

 

html, body{

          overflow-x: hidden; /* prevents horizontal scroll bars */

          -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */

          height: 100%; /* fixes focus scrolling in Safari (OS X) */

          background:#fbfbfb;

    font-family: 'Quicksand', sans-serif;

    text-transform: lowercase;

    color:#272a2c;

    font-size: 16px;

}

 

 

/* Lists */

 

 

ul{

    margin: 0;

    padding: 0;

}

 

 

/* Container */

 

 

#container{

          position: relative;

          padding: 20px 40px;

}

 

 

/* Menu Button */

 

 

.menu-btn{

          width: 0px;

          padding: 0px;

          margin-bottom: 30px;

          background: #fbfbfb;

          color: #272a2c;

          font-size: 30px;

          text-align: center;

          cursor: pointer;

}

 

 

.menu-btn:hover{

          background: #fbfbfb;

          color: #272a2c;

}

 

 

.full {

    background:#f16866;

    width:90%;

    padding:5%;

    margin-bottom:5%;

    text-align: center;

    color:#272a2c;

    font-size: 2em;

}

 

 

.third {

    background:#f16866;

    width:22%;

    padding:5%;

    float:left;

    margin-bottom:5%;

    text-align: center;

    color:#272a2c;

    font-size: 1em;

}

 

 

.col1 {background:#f16866;margin-right:2%;}

.col2 {background:#f16866;margin-right:2%;}

.col3 {background:#f16866;}

 

 

 

 

.clearfix {

    clear:both;

}

 

 

 

screen.png


 
Replies
  • Currently Being Moderated
    Jan 28, 2014 10:52 PM   in reply to Gar7

    Instead of

     

    <div class="clearfix"> </div>

    <footer class="full"> Copyright </footer>

    do this

     

    <footer class="full clearfix"> Copyright </footer>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points