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 trialtroy beckett
12,035 Pointsproblems 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
20,658 PointsYou 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
14,981 PointsHello 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!
Jason Anello
Courses Plus Student 94,610 PointsHi 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;
}