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

Phil White
PLUS
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
<!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
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

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

Hi Jason,

Thank you so much, problem solved! Appreciated!

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.

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

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

Glad you got it fixed!

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

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