I haven't got an answer to this question yet on other code forums, and i am surprised since i dont get why i cant figure it out...
but i need to add a clear fix in-between two divs due to floats, but it adds a gap (un-wanted space).
simply, how do i get rid of that, and keep the clearfix, since i need it.
HTMLCode
<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"> </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;
}
PHOTO