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

Posted by tiffanyhughes
tiffanyhughes
635 Points

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

Dustin Matlock
Dustin Matlock
33,856 Points

Would you mind Posting your Code?

4 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

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
Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

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.

tiffanyhughes
tiffanyhughes
635 Points
tiffanyhughes
tiffanyhughes
635 Points

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;
}
tiffanyhughes
tiffanyhughes
635 Points
tiffanyhughes
tiffanyhughes
635 Points

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