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 Jason Butler
Jason Butler
12,394 Points

Picture location

This is how I have my about page setup in making a website.

<section> <img src="img2/jason.jpg" alt="photo of Jason Butler" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Jason Butler this is my design portfolio where I share all of my favorite work. When I'm not painting, I enjoy working out, playing video games, drinking whiskey, and more.</p> <p>If you would like to follow me on Twitter, my user name is <a href="http://twitter.com">@jabu</a></p> </section>

and this is how it is in css

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

But the picture ends up on the far right top of the page inline with header? Why is that? HELP!

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Assuming you're using firefox and you're working on "How to Make a Website"...

There should be a correction to the problem in the Teacher's Notes section where you clear the floated header in .profile-photo. This was a fix specific to that problem.

However, I recommend that you instead clear the floated header in your wrapper element because this is the first element that comes after the header and should be the one to clear the float. Then you won't need to do the correction for firefox that is in the Teacher's Notes.

Add to your existing #wrapper rule:

#wrapper {
    clear: both;
}
Jason Butler
Jason Butler
12,394 Points

Thank you for that help. I never looked in the teachers notes but NOW I know to do that.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

We need more context in order to help, maybe post a link to the page so we can debug it. First place I would start is chrome dev tools / firebug.