Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Posted by John Lukacs
John Lukacs
26,806 Points

Tried to float; followed video down to the letter. workspaces did not work

@media (min-width: 789px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 85%;
        max-width: 1150px;
        margin: 0 auto;
    }

    .main-nav {
        float: right;
    }

    .name,
    .main-nav li {
        float: left;
    }

    .main-nav li {
        margin-left: 12px;
    }

    /* ---- Columns ---- */

    .primary {
 width:40%; 
  float:right;
}

.secondary {
  width:40%;
  float:right;
}
.col {
 float:right;
  padding-left:1em;
  padding-right:1em;
}

    /* ------------- */

    .feat-img {
        width: 300px;
        float: left;
        margin-top: 5px;
        margin-right: 25px;
        margin-bottom: 25px;
        padding: 10px;
        border: solid 1px #d9e4ea;
    }

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

}

7 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

hey john lukacs. Your css for the columns is not supposed to be that way.

Below is how to solve it. Sometimes I personally watch the video as many times until I understand the concept. Don't be afraid to comment out the css rule and un-comment them to see how they work. Plus refresh your browser.

.container {
width: 85%;
max-width: 1150px;
margin: 0 auto;
/* border to see how the spacing looks */
border: 1px solid red;
    }

 .col {
float:left;
padding-left:1em;
 padding-right:1em;
}
// primary and secondary have to equal 100% for the entire width.
.primary {
width:60%;
}   
.secondary {
width:40%;
}

alternative

.col {
width:50%;
}

.primary {
float:left;
}   
.secondary {
float:right;
}
Jason Berteotti
Jason Berteotti
12,352 Points
Jason Berteotti
Jason Berteotti
12,352 Points

You floated .primary and .secondary right as well, just float: right under .col and it should be fine.

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

That dosn't change anything

Jason Berteotti
Jason Berteotti
12,352 Points
Jason Berteotti
Jason Berteotti
12,352 Points

Did you apply .clearfix to the parent of the .col elements?

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Yes indeed i did. Its not a clearfix issue. I don't understand this behaviour

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

The only thing that did work is if I float primary right and float secondary left. the whole .col float left thing dosent work like he shows it in the video

Jason Berteotti
Jason Berteotti
12,352 Points
Jason Berteotti
Jason Berteotti
12,352 Points

apart from the two extra floats, my section of that code is identical to yours, and it worked perfectly. It must be in another section of your CSS or in the HTML