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

troy beckett
troy beckett
12,035 Points

problems with website layout

Please take a look at my code pen:

http://codepen.io/tbeckett24/pen/cxiHb

can someone please explain why my paragraph inside my section is not not below my logo and navigation section. What I want to achieve is the look of most websites where the logo and nav are separated at the top and then my content is added below it. Thanks for your help in advance. How would you go about seperating the naviagation and the website content??

3 Answers

Marko Koron
Marko Koron
20,658 Points

You are using float on nav and #logo so elements after the floating elements will flow around it. A quick fix for now is to add p {clear:both} but watch (or re-watch) the videos on layouts and using float here on Treehouse.

Atanas Sqnkov
Atanas Sqnkov
14,981 Points

Hello Troy!

Using "float" on a element takes it out of the default document flow. There are a few ways to fix your problem, but in this particular case, You should simply create a class called "clear" in your CSS stylesheet.

The CSS snippet that You must add is as follows:

    .clear {
        clear: both;
    }

This basically tells the browser to remove any non-floated elements from the "floated" elements area. This is not a definition, this is the simplest way to explain.

Therefore, your HTML markup should look like this:

<header>
      <h1 id="logo">EF Everything United</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
          <li>Best Eleven</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>

    <div class="clear"></div>

    <section>
          <p>ffffffffffffffffffffffffff</p>
    </section>

You simply add a blank div between the containers that you wish to separate and give it a class of "clear". I hope this helps!

Cheers!

Hi Troy,

You should have your section element clear the floated elements in the header. This is the first element after the header and by using clear:both the browser will force that element below all previously floated elements.

section {
  clear: both;
}