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

String Grasshopper
String Grasshopper
9,735 Points
Posted by String Grasshopper
String Grasshopper
9,735 Points

What's wrong with my code?

After finishing the HTML and CSS course I decided to mess around and build a one-page website. I haven't gotten very far and have already encountered my first problem. The problem is that the navigation links refuse to appear inside my div with the class "main-header" on the top of my page.

Any idea on what I might be doing wrong?

Here's my code:

Index.html: <html> <head> <title>Newbie Web Developer</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <div class="main-header"> <h1 id="heading-text">Newbie Web Developer</h1> <nav> <li>About</li> <li>Contact</li> </nav> </div> </header> <footer>
</footer> </body> </html>

And here's my CSS file:

.main-header {
  background-image: linear-gradient(#CCF5FF, #006680);
  width: auto;
  height: 100px;
}

#heading-text {
  padding: 60px 0 0 15px;
}

nav {
  float: right;
}

/* BODY */
body {
  background-image: linear-gradient(0deg, #006680, #111);
}

/* FOOTER */
Craig Schlegel
Craig Schlegel
12,268 Points
Craig Schlegel
Craig Schlegel
12,268 Points

This is a common problem. Whenever you use the "float" property it creates a problem for parent div with it clearing. The best way I have seen to fix this is from perishable press. What you need to do is create a "clearfix" class that creates a div after the parent div that will fix the clearing problem. In this case you would add the class to "main-header".

<div class="main-header clearfix">

Here is what you would add to the css then:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

1 Answer

String Grasshopper
String Grasshopper
9,735 Points
String Grasshopper
String Grasshopper
9,735 Points

Thanks! Well, I tried a few things here and there with little luck. However, after noodling around for an hour or so, I figured out the problem! It turns out that h1 displays as block elements by default so I had to change its display property to inline to avoid it pushing down the nav items :D