CSS Help with Positioning

HTML-CSS
1

image
image1919×641 91.6 KB

I’m having problem with my positioning of span element.
As you can see that I have forcefully put the right attribute’s value to -1100px. If the layout gets bigger, the div element and the span element doesn’t remain in it’s position. what should I do?

Here’s the link: https://codepen.io/tahsin09/pen/OKBOrg?editors=1100

2

I am not sure what you are asking. The text displayed explains exactly what is going on. You have created a static element by “forcing” a stationary position of -1100px. This is based off the resolution of the screen. If you want something to move with it’s container, you need to make it dynamic.

3

Maybe this will help?

.end{
float: right;
margin-top: -17px;
}

Edit: lasjorg has a better solution:

.end {
 position: absolute;
  bottom: 0;
  right: 0;
}
1 Like
4

Considering the parent div is set to position relative it would make more sense to set the .end to be absolute and just use right: 0;.

.end {
  position: absolute;
  bottom: 0;
  right: 0;
}
2 Likes
5

yes, I wanted to know how it’s done. Anyways, I’ve got y solution, lasjorg’s code helped.

6

yes, your one worked as well but, indeed lasjorg one’s better :blush:

7

span is not a block level element, so I don’t think you can position it relative to another element., why dont you try to use a div instead

8

image
image1920×238 13.6 KB

I used span because it doesn’t take the whole row. The above picture is when I used the div element instead of the span element.