Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

best city guide and media queries

I tried to solve the layout problem for two and three column layouts with media queries.. and got stuck.. and found solution from the videos..

My layout is different and I notice if you mention the third column in the two col (layout) with one full length col below it the big screen layout duplicates the third col below even thought i tell it to float all three to the left...

The only way around it is to explicitly re mention the column by name in the third 3 col layout and forcing a float to the right and to move it up from sitting below using a clear none rule..

Like this @media (min-width:1025px){

.midcontainer{
    width:80%;
    max-width: 1150px;
    margin: 0 auto;
}
.primary {
  width:40%;
}
.secondary,
.tertiary {
  width: 30%;
}
.col {
    float:left;
}
.tertiary {
    margin-top:25px;
    float:right;
    clear:none;
}

}

unlesss i put in the .tertiary rule, the rule .col float left does not work and it keeps the third col below it as for the smaller screen