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 CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Mark Collins
Mark Collins
2,955 Points
Posted by Mark Collins
Mark Collins
2,955 Points

Problem with positioning an inline element.

Here I have text that I want to display to the right of a photograph. Unfortunately for me I am doing something wrong.

This is the html code: <p>A bit about me….</p> <img src="img/becky1.jpg" alt="personal pic" class="photo"> <div class="copy"> <p>In 1992 I graduated...</p> </div>

and here is the css code

.copy { display: inline; }

I want the page to look like:-

"A little bit about me."

Photo .| Text. "I graduated in....."

Unfortunately for me the display: inline is not doing anything. I appreciate your help!

10 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Ok, so please send me an email with the ziped folder of your project (html and css files) so I can have a look at it.

My email: kallil.belmonte followed by @gmail.com

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

In this link I've put two ways you can do this: https://codepen.io/anon/pen/bwNGgy

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Thanks Kallil, but neither seems to work :(. Just using a <p> only pushes the photo farther from the margin and the <span> seems to make no difference at all.... As a heads up, all I want is the text to appear to the right of the photo and if it exceeds the depth to wrap from the bottom of the photo from the left margin.

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Could you please post your code on Codepen and send me the link?

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

I don't subscribe to Codepen, and it won't let me save my code. Here is the code I have written below. I hope this is ok. So I want the personal introduction to sit right of the photo.

<p>A bit about me….</p> <img src="img/becky1.jpg" alt="personal pic" class="photo"> <div class="main-nav"> <p>In 1992 I graduated from Sheffield University... </p>

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Try this:

<p>A bit about me….</p> 

<img src="img/becky1.jpg" alt="personal pic" class="photo"> 

<div class="main-nav"><p>In 1992 I graduated from Sheffield University... </p></div>

.main-nav {
  display: inline-block;
}

PS: When you click to save a "pen" on Codepen, a login form pops up, at the bottom of this form is written "That's OK, I just wanna Save as Anonymous", so to save the pen even without an account you must click at "Save as Anonymous" link in this phrase.

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

It's not working. The photo moves slightly to the right and beneath it the text is also indented. Not sure what is going wrong! I don't have any more pertinent code that you should need. So I don't know how to help you to help me. I went back to codepen but I don't see where to save... Not having a good time atm lol!

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Thank you very much. I have sent it but its 5mb for some reason. Sorry about that!

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Thanks! The 'Class' clinched the deal it seems. All the best.