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

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

Problem with paragraph riding up into header

Hi,

Ive just started trying to play around and make a basic site but have got stuck early on with a problem. My paragraph text is riding up into my header and over laying it. I've sat here for the last hour at least trying to work it out but had no luck.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
        <header>
            <a href="index.html" id="logo">
            <h1>Visba One</h1>
            </a>
            <nav> 
                <ul>
                    <li><a href="index.html">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact<a></li>
                </ul>
            </nav>
        </header>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc. </p>
</body>     
</html>
Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
h1 {
    text-align: center;
    margin-bottom: 0;
    margin-left: 10px;
    float: left;
}

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

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

nav li {
  display: inline-block; 
}

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

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Phil,

This is because your header has floated elements and your paragraph is not clearing those floated elements.

If you add:

p {
  clear: both;
}

Your paragraph will then drop below all previously floated elements.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Hi Jason,

Thank you so much, problem solved! Appreciated!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

I should have added that whatever element follows the header is the one that you want to clear the floated elements. Right now it's the paragraph but as you build out the page you will most likely have a major containing block right after the header.

Like <section> or <div id="wrapper'>

So you'll want to apply that clear: both to whatever element you eventually have following the header.

This is very similar to putting a clear:both; in your footer if your main content area contains floated columns. This forces the footer to drop below previously floated items.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Also, note the improperly closed link in your nav that christopher smith pointed out.

There seems to be a lot of christopher smith's here. Hope I tagged the right one.

christopher smith
christopher smith
5,831 Points
christopher smith
christopher smith
5,831 Points

No matter where I go, there's another Chris Smith lol.

Glad you got it fixed!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I can't say I had noticed before but when I tried to tag you there must have been at least 6 or 7 that showed up and none of them were you. i had to go back and do a lowercase 'c'. Maybe that's why you used a lowercase 'c'. To differentiate yourself from your clones. :)

christopher smith
christopher smith
5,831 Points
christopher smith
christopher smith
5,831 Points

It doesn't do it in chrome but i noticed your a tag for contact is missing the /