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 Build Navigation with Unordered Lists

Posted by Matt Campbell
Matt Campbell
368 Points

When I add "float: left;" to my header, it creates a little bar under the nav that is the same color as the header.

Why does this happen and how do I get rid of it?

3 Answers

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Hey Matt,

When all the elements in a given container are floated, that container collapses. There's a fix for this here. Let me know if that helps.

Matt Campbell
Matt Campbell
368 Points

Hi Mikis, Thanks for taking the time to help out. I still can't figure out how to clear my float (nor do I really understand what that means.

Here's my code:

/******************************************************
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%;
  max-height: 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: 3em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 1.75em;
  margin: -0.3em 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: 1em;
  text-align: center;
  clear: both;
  padding-top: 4em;
  color: #999;
}

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

/******************************************************
Page: Portfolio
*******************************************************/

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

#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #fff;
  color: #588C73;
}

#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: #F2AE72;
  border-color: #c78951;
}

/* nav background on mobile devices */
nav {
  background: #c78951;
}

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

/* links */
a{
  color: #588C73;
}



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

/* selected nav link color */
nav a.selected, nav a:hover{
  color: #588C73;
}
miikis
miikis
44,957 Points

Floating takes a given element out of the normal document flow and positions it either to the left-side or the right-side of it's parent element/container. What happens is, whenever you float ALL the child elements of a given parent container, that parent container collapses, i.e. it assumes no height... it's weird. But there's a "fix" for it, a workaround if you will. If I understand correctly, all the "fix" does is fool the parent container into thinking that at least one of its child elements have not been floated...i.e. at least one of the parent container's child elements remains in the normal document flow a.k.a static positioning.

This is the most common css for that "fix." Basically, you just add the class group to any parent container to make sure it doesn't collapse on ya. 

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

Also, in your code, you floated the header. Why? I can't be sure without looking at your HTML, but more than likely, the header is the parent container for your logo and the nav. I'm assuming you want the logo and the nav to be side-by-side... in this case, you would float both the logo and the nav ...not the header.

Hope that helps man.

Luis Amez
Luis Amez
10,289 Points
Luis Amez
Luis Amez
10,289 Points

Hi Matt,

I don't know if you will read this but, just in case, here you have your solution.

Your problem isn’t with the float but with the margins. You have to remove the bottom margin in the Navigation section.

Your code is:

/****************************************************** Navigation *******************************************************/

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

But it should be:

/****************************************************** Navigation *******************************************************/

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

Because when you write:

margin: 20px 0;

Is like you write:

margin: 20px 0 20px 0;

So you have a bottom margin of 20px and the browser fills that space with the background color of the parent element (header in this case).

I hope that helps you. And sorry for my English.

Yuriy L
PLUS
Yuriy L
Courses Plus Student 32 Points
Yuriy L
Yuriy L
Courses Plus Student 32 Points

The same problem, nothing helps, "fix" does nothing. Upd.: I didn't specify a padding for <nav>, when I added "padding: 10px 0;", problem has resolved.