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

image float

Hello, I am having trouble floating an image around the text. I've added a class and set the width but the image keeps running off the side of the page and I am not sure what else to try. Here's the code http://cdpn.io/GCLsk it's the image under the h3 class about me. Thank you!

8 Answers

I finally got it! Basically I was floating the whole class left .class as opposed to floating the element within the class .class img I was getting confused as the img is the only element within the class but anyway not sure if it's right but it's worked! Thank you

Hi Becky so are you saying you want the text to clear the image? So the image does not go to the right and the text sits above and below?

If thats the case - try removing the float:right from your image and apply a margin: 0 auto; to center

Hi Graham, no I want the image to sit next to the text, on the right. It has 'kind of' worked in that the image is to the right but the text hasn't moved at all and the image has gone right off the page so I have to scroll to view it. Does it make sense?

Without seeing a visual of what you are looking to achieve I am going have to say try floating your <p> to the left and applying a width to it of say 90% see it that works (unless I am completely missing what you are trying to achieve - which is very possible :-) )

Yes I want the text to wrap around the image :)

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,892 Points

well I can't see the image inside codepen. But try to give the image margin. something like 10-20 px. you can also give it padding.