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

TIAGO SANTOS
TIAGO SANTOS
2,450 Points
Posted by TIAGO SANTOS
TIAGO SANTOS
2,450 Points

Nav bar gets pushed down

I had this code for my main css:

/* This is the code of my main.css*/
header{
 /*float:left;*/
 margin: 0 0 30px 0;
 padding: 5px 0 0 0;
 width:100%;
}

/* this is the code of responsive.css for min-width: 660px */
  nav {
   background: none;
   float:right;
   font-size: 1.125em;
   margin-right: 5%;
   text-align: center;
   width: 25%;
  }

I commented the float property cause i wast sure what was doing. With this code my nav bar gets push down to the section part as if there is some kind of overflow.

When i remove the comment the page looks fine. I would like to know why? please??

Philip Gales
Philip Gales
15,193 Points

What is the website? If it is a workspace take a snapshot by clicking the camera icon in the upper right and sharing that link.

2 Answers

Martin Ellis
Martin Ellis
6,724 Points
Martin Ellis
Martin Ellis
6,724 Points

Hi Tiago,

Both the main header and the navigation bar on your website are acting as block level elements. This means that they will take up the full width of their parent container (for the header this is the full width of the page). Block level elements appear 'stacked' on top of each other. This is what you are seeing when the float property is commented out - the blue header is taking up the full width of the page and the nav bar is being pushed down underneath it. However, applying floats allows block level elements to be displayed alongside each other so that's why your nav bar displays inside the blue header once you apply the float.

Your h1 and h2 elements inside the header are still functioning as block level elements so that's why your nav bar appears at the bottom of the header as the room above it is taken up by the h1 and h2 elements which are at full page width.

Hope this clears things up!

TIAGO SANTOS
TIAGO SANTOS
2,450 Points
TIAGO SANTOS
TIAGO SANTOS
2,450 Points

Thank You so much!! This was very helpful :)