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

Posted by Ryan Duncan
Ryan Duncan
7,146 Points

Float: left; is moving my border-bottom of my header up into the rest of the header...

In "How to make a website" we get to the section of removing the white space above the header. When I add float: left;, it changes my darker green border at the bottom and moves it into the rest of the header. What is happening here?

here is my css...

/***************************** General *****************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/***************************** Header *****************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/***************************** Section *****************************/

/***************************** Navigation *****************************/

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

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

nav li { display: inline-block; }

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

/***************************** Footer *****************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/***************************** Page - Portfolio *****************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/***************************** Colors *****************************/

body { background-color: #fff; color: #999; }

header { background: #6ab47b; border-color: #599a68; }

h1, h2 { color: #fff; }

a { color: #6ab47b; }

nav { background: #599a68; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

/***************************** Page - About *****************************/

/***************************** Page - Contacts *****************************/

john larson
john larson
16,594 Points

Floats cause some odd behavior like that. Have you learned the css clear: both; yet? If not you will soon. You could try addressing the element that is moving out of place with this: 

//element that is moving out of place footer or whatever then the code that follows

footer {
  clear: both;
}

If that doesn't work there are other possibilities.

Ryan Duncan
Ryan Duncan
7,146 Points

It's not the footer I am having trouble with. And from what I can tell all of my code is exactly the same as Nick Pettit who is running to vids.

john larson
john larson
16,594 Points

I just used footer as an example.

john larson
john larson
16,594 Points 
/***************************** General *****************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/***************************** Header *****************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/***************************** Section *****************************/

/***************************** Navigation *****************************/

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

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

nav li { display: inline-block; }

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

/***************************** Footer *****************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/***************************** Page - Portfolio *****************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/***************************** Colors *****************************/

body { background-color: #fff; color: #999; }

header { background: #6ab47b; border-color: #599a68; }

h1, h2 { color: #fff; }

a { color: #6ab47b; }

nav { background: #599a68; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

/***************************** Page - About *****************************/

/***************************** Page - Contacts *****************************/

If you post your html also, I can run the whole thing and take a look.

When you post code, it looks better if you do this: three back tics (below the ~ symbol on the keyborad) post the code and the three more backtics

Ryan Duncan
Ryan Duncan
7,146 Points

here is my html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ryan Duncan | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Ryan Duncan</h1>
        <h2>Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html" class="">About</a></li>
          <li><a href="contact.html" class="">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending mode in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create and 80s style glow.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips, created using Photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/dncnryn"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2016 Ryan Duncan</p>
      </footer>
    </div>
  </body>

</html>

```html

3 Answers

Stephan L
Stephan L
17,821 Points
Stephan L
Stephan L
17,821 Points

Floating an element will cause its parent element to collapse, since the floated element is taken out the normal document flow (i.e., the browser interprets the parent element as no longer containing any content). That may be what you're seeing. As just a quick fix, you can try setting an explicit height on the parent container (like, height: 250px;); you'll see in later courses the clearfix solution that John mentioned.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

as Stephan suggested, I added a height to the header and it seemed to fix it. As to why your code is doing that and not Nicks? It's beyond me... hopefully some one else can comment.

header {
  float: left; margin: 0 0 30px 0; 
  padding: 5px 0 0 0;
  width: 100%;
  height: 125px;
}

Notice I added height after width. worked for me.

Ryan Duncan
Ryan Duncan
7,146 Points

That is so strange. I have seriously racked my brain trying to understand why the code could be identical and be doing different things. To me it means its not identical but until i figure out what is wrong, I will use what you guys have suggested and add the height in there.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

The first thing that comes to mind about why you could have the same code and different results...is browsers. Different browsers display things differently. If you look at your site that you are working on in different browsers you will notice: text size can appear different, padding and margin can appear different. These things can alter the display just enough to do some undesirable things. Beyond that different screen resolutions will change things as well. I don't know the specifics, but I've seen in general that this happens.