Hey guys,
If you size a container using ‘%’ how can you keep the logo tracking the container in that exact spot?
Here’s my example of the logo coming out from the box.
Using ‘px’ solves this but of course sometimes I want a box to resize with the screen.
Cheers.
Hi @oocopperpot
I think its the margins that you’ve placed on the image that are pushing it out.
Hey,
Even with position:relative it still happens. I finished my latest challenge and used position: absolute to keep icons in box and adjusted via @media but unsure if this is the best way.
Or… I’m assuming that it’s good practice to not have a box that changes size without the use of @media?
I think elements should automatically stay within the parent div unless they’ve been pushed out.
The trick is getting the damned things to stay in the same spot as the increasing/decreasing parent container.
It’s because of the top/left margins you have on the image. Get rid of those and the image will stay in the box. You’ll need to use some other method to position the image in the box.
Hey.
I’ve edited the CSS for a better example of what I mean. It’s not the keeping it in the box that’s the issue, it’s having it stay a certain amount of pixels from the edge even when the container width changes.
Right now it’s at 70% from the left side. As the container grows it of course stays at 70% from the left side but maybe it’s my untrained eyes.
Is this the correct way? I dunno, for some reason when I place a logo (for example) in the corner of a box then as I change width it looks off when it comes out of position (but of course it’s not out of position, it’s still 70%!!)
I don’t think I understand what you are trying to do here. I see a green box and the magnifying glass image in that box. The image seems to stay inside the box when I narrow/shorten my browser (except if I shorten it too much and the box is not as tall as the image, which you could fix by setting a min-height on the box).
You’ll need to be very clear about what you are trying to do as I’m not sure.
Apologies, just edited my response above.
I’m 99% sure it’s my newbie brain and I’m indeed, talking rubbish.
Clearly 70% from the left is 70% from the left. Again my page here shows a fixed width, the logo stays in the exact same bottom right.
Ignore me! 
That example you linked to is using absolute positioning to keep the icon anchored in the same place as the box it is in changes sizes. If that’s what you are going for then I suggest you do the same thing.
Indeed it is. Is the absolute positioning method more common on websites? I’m trying to pay more attention to websites I visit.
It’s not a matter of what is more popular. It’s a matter of what works for what you are trying to do. In this case, if you want the icon to stay anchored in the bottom corner then absolute positioning is definitely a good way of doing that.
That’s cleared it up, thank you.