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 How to Make a Website Adding Pages to a Website Style New Pages

Russ Sanderlin
Russ Sanderlin
3,005 Points
Posted by Russ Sanderlin
Russ Sanderlin
3,005 Points

When I use display:block, why does my profile photo end up in the top right hand corner of the page?

Following along in the "Adding pages to a website, Style new Pages", I set display:block and my image ends up in line with my header. When I remove display: block or replace it with display: inline, it returns back to where it is supposed to be but it is not centered. Very frustrating while learning how to do this :( Any help, would be greatly appreciated.

6 Answers

Russ Sanderlin
Russ Sanderlin
3,005 Points
Russ Sanderlin
Russ Sanderlin
3,005 Points

I'm not sure how much you want me to post, but here is the CSS portion:

/********************
Page: About
********************/

.profile-photo {
  display: block; /* Do not display inline */
  max-width: 150px;
  margin: 0 auto 30px; /* Use this technique to center on page */
  border-radius: 100%; /* Adds rounded corners to images 100% makes picture a circle instead of a square */ 
}
Will Hughes
Will Hughes
1,992 Points
Will Hughes
Will Hughes
1,992 Points

I've just taken a look through your CSS, and tested it, I don't seem to see any issue, may I ask what Internet Browser are you using?

Carlos Pals
Carlos Pals
814 Points
Carlos Pals
Carlos Pals
814 Points

are you using position absolute/fixed?

Russ Sanderlin
Russ Sanderlin
3,005 Points
Russ Sanderlin
Russ Sanderlin
3,005 Points

I have no CSS rules that use the position property.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Russ,

Unfortunately, there's a cross-browser bug in this course (my fault!). If you go back to the video and check the "Teacher Notes" section just below the video player, you'll find the code to correct the issue. :)