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

HTML

Posted by Jonah Saravo
Jonah Saravo
315 Points

Floating my gallery to left is floating gallery/footer to left instead of just gallery.

INDEX:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jonah Saravo | Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Indie+Flower' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jonah Saravo</h1> <h2>Web Developer</h2> </a> <nav> <div id="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> </div> </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 a 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""/> <p>Drips created in photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""/> <p>Creating shapes using repitition.</p> </a> </li> </ul> </section>

  <footer>
    <a href="http://twitter.com/jonahcs"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
    <a href="http://facebook.com/jonahcretesaravo"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
    <p>&copy; 2014 Jonah Saravo.</p>
  </footer>
    </div>

</body> </html>

CSS:

/******************************** GENERAL ********************************/

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

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/******************************** HEADING ********************************/

logo {

text-align:center; margin: 0; }

a { color: #6ab47b; }

/* Green header*/ header { background: #6ab47b; border-color: #599a68;

} /* Logo text*/ h1, h2 { color: #fff; font-family: 'Lobster'; margin: 15px 0; font-size: 2.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size:1.75em; } /* nav background on mobile decices*/ nav { background: #599a68; }

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

}

nav {

text-align:center; padding: 10px 0; margin: 20px 0 0; font-family: 'Shadow Into Light'; }

/******************************** FOOTER ********************************/

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

/******************************** PAGE: PORTFOLIO ********************************/

gallery {

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

}

gallery {

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

/* selected nav link*/ nav a.selected, nav a:hover{ color: #32673f; } /Site body/ body { background-color:#fff; color: #999; }

Ends up looking like this .. http://prntscr.com/5ef4qe

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Have you tried adding 

clear: left

to your footer?

Jonah Saravo
Jonah Saravo
315 Points

Okay, That fixed the footer! Thank you, but the:

float: left

in my #gallery still doesn't seem to be working. The pictures are still all in 1 straight line rather than divided into two columns like it shows in the lesson video.

Any advice for that?

mikes02
mikes02
Courses Plus Student 16,968 Points

I haven't gone through that entire video so I am not certain what the outcome you are looking for is, but if you want list items in an unordered list floated you will have to apply the float to the li, for example:

#gallery li {
float: left;
}