How can I move divs around in CSS along with their content?

Question

I'm rather bad at phrasing, but I'm messing around with the box model in CSS and I still can't get the full hang of it. Im trying to put text inside a div with borders around it and be able to move the div's position around the page freely. Unfortunately if I use the text-align attribute to move the text to the right of the page it just moves the text making the border stretch all the way to the left.

I get this:
-------------------------------------
I example l
I l
-------------------------------------

Instead of this:
-------------------------------------
I example l
I l
-------------------------------------

I wanna be able to move the whole box along with its content wherever I wish, I don't know if I explained it clearly enough, but if any of you know what I'm talking about if gladly appreciate the help... Thank you so much!

Answer 1

It's always good to link any code that you are working with to your question 😉

Anyway, positioning can certainly be confusing. That I agree with, lol.

If I understand what you want to do correctly, you can adjust how far from the top, bottom, left, or right side that your box is from it's starting position like this:

#myDiv {
top: 20vw;
left: 20vw;
}

You may have to add too:

position: absolute;

I believe that they will only be affected by the top, left, etc. if you set the position.

Answer 2

Thank you so much, I forgot to link the code, but this was exactly what I needed, such an easy fix I feel a bit dumb haha!

Answer 3

HeyItsJay I wouldn't feel dumb about it. Forgetting things like when we are still learning is perfectly normal 😁

Answer 4

you can use margins too