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 Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

Relative/Absolute position

Hello!

Hope all goes well. Can someone help please? I am really stuck on this...

so I have the following HTML:

<section class="locations clearfix">
            <h1>Paws Locations Near You</h1>
            <img src="images/locationservices.svg" alt="Image of a map">
            <div class="form">
                <form method="post">
                    <input type="text" id="location" name="location">
                </form>
                <img src="images/locationmarker.png" alt="Location Marker">
            </div>
            <p>Search your area to find our locations nearest you!</p>
        </section>

and I need the last image to be situated on the top-right side of the input. I have given an absolute position to the image and a relative position to the class="form". However I either have my HTML wrong formulated or I am targeting the wrong tags.

Would anyone be able to help?

Thank you!

Jonathan Stigsby
Jonathan Stigsby
8,271 Points

Hi Silvia,

I don't think I would solve it with positioning. To put the location marker image next to the input field, I would simply target your div class form in css, and display it with as a flexbox:

.form {
 display: flex; 
}

2 Answers

Jonathan Stigsby
Jonathan Stigsby
8,271 Points

Great to hear it :-) Sometimes you get fixated on things! All the best

Silvia Ramos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points
Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

Hi Jonathan Stigsby ! thank you! I was obessed with the position bit and really thought it should be the way to do it... thanks for checking and correcting :) much appreciated