Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clearfix question

    Clearfix question

    So i am using a clear fix and it is adding unwanted height (space). Is there a way to keep the clear fix but remove the space it adds?

    Code:
    <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">☰</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">&nbsp;</div>
    
        <footer class="full">
          Copyright
        </footer>
    
    
            </div>
    
            <!-- Pushy JS -->
            <script src="js/pushy.min.js"></script>
    
        </body>

    Code:
    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;
    }

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Garz,

    and a warm welcome to these forums.

    Remove the &nbsp; from here...
    Code:
    
    <div class="clearfix">&nbsp;</div>
    It sets a height to the div corresponding to it's defined "font-size".
    coothead

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Garz,

    and a warm welcome to these forums.

    Remove the &nbsp; from here...
    Code:
    
    <div class="clearfix">&nbsp;</div>
    It sets a height to the div corresponding to it's defined "font-size".
    coothead

    Thanks a lot!

    didnt even think that something that small could be it, probably the only thing i didnt try.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts

    No problem, you're very welcome.

    coothead


  •  

    Posting Permissions

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