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 Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Floating of the images

After floating of the images to the left my footer got up and right somehow. 5 images laid down each other vertically. I downloaded my own pictures. Could it.be because of the different image size?

Amin Ruhul
Amin Ruhul
Courses Plus Student 4,762 Points

This is because you did cleared the float. There are 2 ways to do that. Here you can get details about clearing float. http://www.quirksmode.org/css/clearing.html

nico dev
nico dev
20,364 Points

Would you be able to post your code?

In order to post it, you need to type three times the character under ESC in most keyboards, then type enter, write/paste your code starting in the next line, and again, after the last line, type enter, and type three times the same character mentioned above.

That can help you receive more specific feedback.

Ah! Also: in what specific video/challenge are you right now?

Thanks! :)

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Thanks for the feedback. I am in the video "Style the Portfolio" now.

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Halyna Buriachenko |Web-designer</title>
   <link rel="stylesheet" href="css/reset.css">
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Merriweather:700|Oxygen:700" rel="stylesheet">
   <link rel="stylesheet" href="css/main.css">
  </head>
 <body>
    <header>
      <a href="index.html" id="logo">
       <h1>Halyna Buriachenko</h1>
       <h2>Web-designer</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/1.jpg">
           <img src="img/1.jpg" alt"">
            <p>Playing with colors.</p>
         </a>
        </li>
        <li>
         <a href="img/4.jpg">
           <img src="img/4.jpg" alt"">
            <p>Experimenting with shadows.</p>
         </a>
        </li>
        <li>
         <a href="img/3.jpg">
          <img src="img/3.jpg" alt"">
           <p>Performing content outwards.</p>
         </a>
        </li>
        <li>
         <a href="img/2.jpg">
          <img src="img/2.jpg" alt"">
           <p>Adjusting the exposure and using the Adobe Camera Raw filter.</p>
         </a>
        </li>
        <li>
         <a href="img/5.jpg">
          <img src="img/5.jpg" alt"">
           <p>Experimenting with simplicity.</p>
         </a>
        </li>
       </ul>
    </section>
    <footer>
      <a href="http://twitter.com/HeilySweet"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/galina.buryachenko"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2017 Halyna Buriachenko.</p>
    </footer>
     </div>
 </body>
</html>
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points 
/**************************
GENERAL
**************************/

a{
  text-decoration: none;
  color: #4d1a00;
}

body{
  background-color: #fff;
  color: #808080;
  font-family: 'Indie Flower', cursive;
}

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

img{
  max-width: 100%;
}
/**************************
HEADING
**************************/

#logo{
  text-align:center;
  margin:0;
}

header{
  background: #ffcc66;
  border-color: #ffd480;
}

h1, h2 {
  color: #fff;
}

h1{
  font-family: 'Merriweather', serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.5em;
}

h2{
  font-family: 'Merriweather', serif;
  font-size: 1.3em;
  margin: 5px 0 0;
  font-weight:normal;
}


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

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

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

nav {
  background-color: #ffd480;
}

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

nav a.selected, nav a:hover{
  color: #4d1a00;
}

/**************************
Page:Portfolio
**************************/

#gallery {
  float:left;
  width:35%;
  margin:2.5%;
  padding: 10px 10px;
  background-color:#f5f5f5;
}
``
/**************************
FOOTER
**************************/

footer{
  text-align: center;
  font-size: 0.75em;
  padding-top:50px;
  color: #ccc;
  font-family: 'Merriweather', serif;
}

1 Answer

Amin Ruhul
Amin Ruhul
Courses Plus Student 4,762 Points

Just add this CSS.

footer { clear: both; }

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Wow. That helped. Thanks!