Streaming live at 10am (PST)

How can I align a container to the right edge of another container?


#1

'

`

I'm trying to align the grey box to the right edge of the large image, and position it relative to that edge. I've tried selecting position > right, right bottom, right top, etc. But none of them do what I want. I don't want to use absolute positioning because that would be weird on different resolutions. How can I do this?

Edit: I figured it out, I just had to set float to right


Here is my public share link: https://preview.webflow.com/preview/pizza-portfolio-site?preview=278621b85ffddbc046c65af20174b384
(how to access public share link)


#2

Hello @winterdrake

Relative positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will has no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static (auto).
But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be.

In your situation, I would suggest using float: right setting if you do not want to use absolute positioning.

Regards,
Anna


#3

Set your parent container position: relative a the div absolute and 0px from the right, 0px top.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.