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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Jared Hensley
Jared Hensley
8,106 Points

When I try to float #logo to the left, it shifts my nav up. check out my code please!

Here is my responsive css

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

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

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

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



   /* *******************************
   3 * 5 = 15 (3 colums with 5% margin each)
  100% - 15% = 85% leftover for images
  85/3 = 28.3333333333
   *********************************/



   /* *******************************
   PAGE: PORTFOLIO THREE COLUMN LAYOUT
   *********************************/



  #gallery li {
    width: 28.3333%;
  }

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


   /* *******************************
   PAGE: ABOUT
   *********************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

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

   /* *******************************
   PAGE: 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%;
  }



}

Here is my Index.html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jared Hensley | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,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>Jared Hensley</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">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 modes in Photoshop.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-06.jpg"> 
             <img src="img/numbers-06.jpg" alt=""> 
             <p>Trying to create an 80's style of glows..</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-09.jpg"> 
             <img src="img/numbers-09.jpg" alt=""> 
             <p>Drios created using Photoshoop 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/jaredhensley732"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/mcflyhensley"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Jared Hensley.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,956 Points

It's because when you float an element,you take it in of "normal document flow".

To fix this try putting a clear fix n your navigation element.

.clearfix {
display: table;
content: "";
clear: both;
}
Jared Hensley
Jared Hensley
8,106 Points

Thank you Jonathan, I'll keep this in mind. I had an extended response in your double post but it was deleted as I was posting, hence a double deletion lol. Anyways, I'm really enjoying the critical thinking aspect of this whole gig so thank you. Actually, my layout now looks like the instructors after he added a couple of more things which is strange...but hey, I'm still a rook. Cheers.

In your CSS, make sure you style the h1, h2, and header tags under @media min-width: 660px. I'll put an example below:

@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: 0.825em;
        margin-bottom: 20px;
    }
    header {
        border-bottom: 5px solid #599a68;
        margin-bottom: 60px;
    }
}
Jared Hensley
Jared Hensley
8,106 Points

I appreciate the help but I think this is one step forward from where I stopped, so even when I add this, it does not bring the navigation element back down to where it should be. My navigation is floated right but in the middle of the header after I float #logo to the left.