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 trialStanley Abraham
3,260 PointsCant seem to figure out why my image wont float to the left.
@media screen and (min-width: 480px) {
/************************************ TWO COLUMN LAYOUT ************************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; width: 40%; float: right; }
/************************************ PAGE: PORTFOLIO ************************************/
#gallery li{ width:28.3333% } #gallery li:nth-child(4n){ clear:left; }
/************************************ PAGE: ABOUT ************************************/
.profile-pic { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Stanley Abraham | Designer |</title> <link rel="stylesheet" href="css/._normalize.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> ="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Stanley Abraham</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"> Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/Stan.jpg" alt="Profile pic of Stan" class="profile-photo"> <h3>About</h3> <p>I'm a man with a dream. A very simple dream, mostly involving food and beer, but a dream nonetheless.</p> <p>Follow me on twitter <a href="https://twitter.com/StanDaMan777">@standaman777</a>.</p>
</section>
<footer>
<a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a>
<a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p> Socail media links</p>
<p>© 2014 Stanley Abraham</p>
</footer>
</div>
</body>
</html>
3 Answers
Philip G
14,600 PointsYou don't bind in your CSS correctly. Try this:
'''html
<!DOCTYPE html>
<meta charset="utf-8"> <title> Stanley Abraham | Designer |</title> <link rel="stylesheet" href="css/._normalize.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">
<header> <a href="index.html" id="logo"> <h1>Stanley Abraham</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"> Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/Stan.jpg" alt="Profile pic of Stan" class="profile-photo"> <h3>About</h3> <p>I'm a man with a dream. A very simple dream, mostly involving food and beer, but a dream nonetheless.</p> <p>Follow me on twitter <a href="https://twitter.com/StanDaMan777">@standaman777</a>.</p>
</section>
<footer>
<a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a>
<a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p> Socail media links</p>
<p>© 2014 Stanley Abraham</p>
</footer>
</div>
'''
P.S.: Forgetting the <link rel is a pretty common mistake of you. You did the same there:
https://teamtreehouse.com/forum/columns-wont-float-i-dont-know-what-im-doing-wrong-please-help
:)
Kevin Stapleton
6,048 PointsHi you have the class name as ".profile-pic" on the About page though it's "profile-photo"
<img src="img/Stan.jpg" alt="Profile pic of Stan" class="profile-photo">
Stanley Abraham
3,260 PointsThis wasn't the issue. I was just rewrote the class "profile pic to see if it was a CSS problem. But thank you for your help.
Rosangela Guerra
2,230 PointsI was having the same problem. You need to put a semi-colon after 28.3333%; <--- Also, even though it's not part of the instructions, after width: 28.3333%; add margin: 2.5%; This is for 3 columns of images, so: the width of each image is 28.3333% = 85% of the page. We add a 2.5%margin to each image and since there are three images (or columns), each gets a 2.5% margin on each side.. since we're only considering the sides: 2.5 x 6(2 sides on every image) = 15. SOooo, 85% + 15% = 100%.
Hope this helps.
Stanley Abraham
3,260 PointsStanley Abraham
3,260 PointsI still I'm trying to figure out how I forgot the <link rel. I don't understand where I made an error. Could you please explain?
Philip G
14,600 PointsPhilip G
14,600 PointsDoes it work now? Unfortunately I don't know what you want me to explain. Can you please reword it? :)