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 nicholas maddren
nicholas maddren
12,793 Points

Image positioning help

Hello I am trying to position the image on this page: http://www.thornabytyres.com/about-page/

The car needs to be in-line with the text and to the right of the block, the problem is that it cant be a separate block it needs to be in the same one. How could I align it with CSS? I seem to have forgotten everything I have been taught haha. I have tried using absolute positioning but it still wont push the text aside.

Thanks

5 Answers

Mike White
Mike White
23,234 Points
Mike White
Mike White
23,234 Points

Check the spelling in your Position property.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Thanks for the tip! I am using this code:

body.custom .golf { display: block; position: absolute; margin-left: 17em; top: 30em; }

The problem I am having now is that when it comes to resizing you will notice it goes out of place, I could solve this with media queries but there must be an easier way mustn't there?

Thanks

Mike White
Mike White
23,234 Points

Another way to look at this is instead of using a p tag for all your text and the image. Break them into their own block level elements and try floating them. If you want the image to scale you'll need to make sure that it's responsive as well.

Sean Perryman
Sean Perryman
13,810 Points
Sean Perryman
Sean Perryman
13,810 Points

I was able to use the Firefox inspector to change your margin-left to 8em, and your top statement to 40em and it lines up right. Give that a shot in the CSS

Sean Perryman
Sean Perryman
13,810 Points
Sean Perryman
Sean Perryman
13,810 Points

Haha nevermind, just noticed that on resize it goes caddy whompus.

Sean Perryman
Sean Perryman
13,810 Points
Sean Perryman
Sean Perryman
13,810 Points

Just from quickly playing around with it, using:

body.custom .golf {
    float: right;
    margin-top: -15em;
}

Achieves a pretty nice result. You might play around with the media queries to scale the image down for smaller pages.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Thanks for the great help! Sean and Mike I have used what you have given me and it's responsive. I just added width: 70% so it scales down and also added a media query that displays none at 800px :)