Floating Columns- footer will is still wrapping what am I doing wrong?

Question

Hi Guys,
I'm following the above video floating seems to work but I cant seem to get the footer to stop wrapping around the coloms what am I doing wrong? 
Any help would be brilliant

richardhemmings · Answer

dont think i have no

lee F · Answer

Can't really see, but have you tried using the clear: both; on the footer?

richardhemmings · Answer

of course i can 
here it is 
``` /* Page Styles
================================ */
{
box-sizing: border-box;
}
html,
body{
height: 100%;
}
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
}
/* Layout Element Colors
================================ */
.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }
/* Main Layout Styles
================================ */
.main-wrapper {
    width: 90%;
    margin: auto;
}
.main-header {
    min-height: 100px;
    padding: 15px;
}
.main-logo,
.main-nav li {
    float: left;
}
/.main-nav {
    background: white; 
    padding: 5px; 
    float: right; 
} */   /need to keep this commented out because I will be using floats quite a lot when it comes to been given projects!*/
.main-nav li {
    margin-top: 15px; 
    margin-right: 10px; 
    margin-left: 10px;
}
.main-logo {
    margin: 0 50px 0 0;
}
.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
}
.main-footer {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    float: bottom; 
}
/* Column Layout
================================ */
.col {
    padding: 20px;
    float: left;
    width: 30%;
}
/* Media Queries
================================ */
@media (max-width: 768px) {
    .main-wrapper,
    .main-nav li, 
    .main-logo {
        width: initial;
        height: initial;
    }
    .main-logo {
        margin-right: 0;
    }
    .extra-content {
        display: none;
    }
} 
```

Welcome to the Treehouse Community

Looking to learn something new?

richardhemmings

richardhemmings

Floating Columns- footer will is still wrapping what am I doing wrong?

lee F

lee F

3 Answers

richardhemmings

richardhemmings

lee F

lee F

richardhemmings

richardhemmings