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 Leo White
Leo White
1,162 Points

Float Conflict

Hi The float on my .profile-pic class has caused my header to generate space at the top of my webpage. What am I doing wrong?

Thanks.

@media screen and (min-width: 480px) {

  /**********************
  TWO COLUMN LAYOUT
  **********************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }



  /**********************
  PAGE: CLIMBING GALLERY
  **********************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

  /**********************
  PAGE: CLIMBS
  **********************/

  .profile-pic {
    float: left;
    margin: 0 5% 30px 0;
  }

}

@media screen and (min-width: 660px) {

  /**********************
  HEADER
  **********************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
   font-size: 2.5em;
  }

  h2 {
   font-size: 1.0em;
   margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #08bdbd;
    margin-bottom: 60px;
  }

}

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <title>Ollie White | Climber</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href="https://fonts.googleapis.com/css?family=Bungee+Inline%7COrbitron" rel="stylesheet">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css"> 
       <meta name="viewport" content="width:device-width, initial-scale=1.0">
    </head>
    <body>
      <header>
          <a href="index.html" id="logo">
            <h1>Ollie White</h1>
            <h2>Climber</h2>
          </a>
         <nav>
          <ul>
            <li><a href="index.html">Climbing Gallery</a></li>
            <li><a href="climbs.html" class="selected">About</a></li>
            <li><a href="chat.html">Chat</a></li>
          </ul>
         </nav>
      </header>
      <div id="wrapper">
        <section>
            <img src="Images/IMG_0519.JPG" alt="Photo of my rabbits." class="profile-pic">
          <h3>About</h3>
          <p>Hi,I'm Ollie.I'm 12 years old and I'm a climber in the cotswolds. Whilst I'm not on the wall I like to ride my bike, bake bread and code!</p>
        </section>
        <footer>
          <p>&copy; 2016 Ollie White.</p>
        </footer>
      </div>
    </body>
</html>
John Paige
John Paige
7,436 Points

Hey sorry for the late response. I'm looking for the video regarding the workspace you're on. Could you link me to it? It's been several months since i worked on CSS, but I'd love to refresh and figure out what's causing your issue.

Leo White
Leo White
1,162 Points

Thanks I have found the link to the video. https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/build-navigation-with-unordered-lists

3 Answers

John Paige
John Paige
7,436 Points
John Paige
John Paige
7,436 Points 
 /**********************
  PAGE: CLIMBS
  **********************/

  .profile-pic {
    float: left;
    margin: 0 5% 30px 0;  /*On this Line, try changing 
    the '30px' entry to 80px*/
  }

}
Darrell Osborne
Darrell Osborne
23,146 Points
Darrell Osborne
Darrell Osborne
23,146 Points

Hi Leo, which breakpoint are you noticing the extra space with? From first glance, I can't see how the float on the .profile-pic would cause any extra space above the header, but it may be an issue with the margin-top of your h1 element. Your header element is collapsing due to everything in it being floated, so the extra space above it could be coming from your h1. Good luck!

Sam Gray
Sam Gray
4,245 Points
Sam Gray
Sam Gray
4,245 Points

I'm having the exact same problem. I fixed it by giving the header on my contact page the id="topspace" so I could select only that header and add some negative margin to the top at the breakpoint where the problem is occurring.

  /******************************************************
  PAGE: ABOUT ~~~~~PROBLEM~~~FIXED???~~~~~
  *******************************************************/

  .profile-photo {
    float: right;
    margin: 0 0 10px 3%;
  }

   #topspace {
    margin-top: -16px;
  }

It fixed the problem but I'm wondering if what I did is really the correct way to fix something like this. It seems kind of messy and it would be better to figure out whats really adding that extra space and correct that.