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 How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Float: left; issue

Hello -

I am working in Chrome Version 35.0.1916.114. I noticed one of the elements we are instructed to add to the Header (float: left;) causes the Nav section to sit higher than the bottom of the Header section. This leaves about 20px of the Header green sitting below the Nav section. If I remove it, it sits just like the version that's in the video.

Am I missing code somewhere?

Thank you,

Tiffany

Would you mind Posting your Code?

4 Answers

It looks like your margin values need fixing up. You had the bottom margin set to 20px using shorthand.

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}
  1. One value: All four sides use that value.
  2. Two values: top/bottom get the first value; left/right get the second.
  3. Three values: top gets the first, left/right get the second, bottom gets the third.
  4. Four values: Top, right, bottom, left (i.e. clockwise from noon) get each value. —Stack Overflow

I can't really tell you what's going on without seeing the code, but from what you're describing it sounds like the header is collapsing. Either float the parent element or give it an explicit height. Please post your code so someone can help.

My bad - new to this site and thought it had tagged where I was in the lessons.

Specific problem area. Here is a screenshot of what my Chrome browser is displaying https://www.dropbox.com/s/9dmkpepxfogqi3p/Screen%20Shot%202014-05-27%20at%206.50.28%20PM.png

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

Here is all of the CSS we've worked thru thus far. My code is exactly the same code as the teacher's but in the video his isn't breaking the header.

/********************************
GENERAL
*******************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}


/********************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/********************************
NAVIGATION
*******************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/********************************
FOOTER
*******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/********************************
PAGE PORTFOLIO
*******************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/********************************
COLORS
*******************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Thank you Dustin Matlock! I must have missed that second 0 when working thru the lesson.