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 CSS Layout Project Column Layout with Media Queries

Lucas Guimarães
seal-mask
.a{fill-rule:evenodd;}techdegree
Lucas Guimarães
Front End Web Development Techdegree Student 3,900 Points
Posted by Lucas Guimarães
.a{fill-rule:evenodd;}techdegree
Lucas Guimarães
Front End Web Development Techdegree Student 3,900 Points

I have some questions about clearfix and inline x float.

Well, my project works but I am not sure it would be right. I used clear: both; only instead of the clearfix. Another question is, in that part of the .col, I used inline-block with float inside of the content. Probably it is because I haven`t created one <div class="container"></div>, I guess that. So my question is, should it be ok?

Please, one feedback about my project would be really awesome !!!

Thanks

Follow my code 

/*
  If you get stuck, feel free to watch the follow-up videos where I'll show you one solution
*/

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;

}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
  text-align:center;
    font-size: 1.25em;
  margin: 0;
}

.main-header {
width: 100%;
}

.name a,
.main-nav a {
    text-align: center;
  display:block;
}
.main-nav {
text-align:center;
}
.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;

  }

.main-nav a:hover {
    color: #093a58;
}



/* ---- Layout Containers ---- */

.banner {
    color: #fff;
    background: #3acec2;
  text-align:center;
  padding-bottom: 20px;
  padding-top: 20px;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
  text-align:center;
  }

.headline {
margin: 0;
  margin-top: 10px;
}

/* ---- Page Elements ---- */

.logo {
margin-top: 40px;
width: 190px;
}

.col {
margin: 1em; 
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 1025px) {

.main-header,
.main-nav li {
display: inline-block;
}

.name,
.main-nav {
vertical-align: top;
    padding: 0;
    margin: 0;
}

.main-nav li a {
padding-left: 2em;
  padding-right: 2em;
}


.name {
float: left;
    padding-top: 1em;
  padding-left: 2em;
}


.main-nav {
float: right;
  padding-top: 1.6em;
  padding-right: 2em;
}

.col {
  display:inline-block;
margin-top: 40px;
  margin: 0;
  padding:0px;
}

.primary,
.secondary,
.tertiary {

  vertical-align: top;
  margin-top: 4em;
    padding-left: 3em;
}
.secondary {
  float:left;
  width: 30%;
 }

.primary {
  width: 40%;
  }

.tertiary {
  float:right;
  width: 30%;
  padding-right: 3em;
  }

.main-footer {
clear: both;
  text-align:center;
}

    /* ---- Float clearfix ---- */

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

}

@media (min-width: 769px ) and (max-width: 1024px) {

/* ----- The same from @media 1025px -------- */

.main-header,
.main-nav li {
display: inline-block;
}

.name,
.main-nav {
vertical-align: top;
    padding: 0;
    margin: 0;
}

.main-nav li a {
padding-left: 2em;
  padding-right: 2em;
}

.name {
float: left;
    padding-top: 1em;
  padding-left: 2em;
}

.main-nav {
float: right;
  padding-top: 1.6em;
  padding-right: 2em;
}

/* ----- End -------- */

.primary,
.secondary,
.tertiary {
  margin:0;
  padding-top:3em;
  padding-left:3em;

}

.secondary {
  float: left;
  width: 50%;

 }

.primary {
  float:right;
  width: 50%;
  padding-right:3em;
    }

.tertiary {
  float:none;
  width: 100%;
    clear: both;
  padding-top:0;
  padding-right:3em;
  }

}
///
Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

To enable others to see your project operating, you need to share all the code, including the HTML part. An easy way to do that without taking up much forum space is to make a snapshot of your workspace and post the link to it here.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The "clearfix" also performs a "clear: both", but it does it using a pseudo-element added to the end of the container. The advantage of that over just applying the same property to a following element is that the clearfix insures that the element containing the floats extends around them. But there may not be any obvious visual difference unless that container has a background or border.