Help help with floating

[houseplant]

so i'm trying to get that little circle with the arrow to float right next to the photo, so i can put a little text box next too it for like 'status', just like a regular social media outline, but i can't figure out how too move it over since float doesn't seem too work.

[border=1px solid black;width:700px;height:200px;background:#E6E4CE;][bg=transparent; background: url(https://64.media.tumblr.com/3942e8c7b762d531437b5f4cabe07755/f8f24befeddb5d3e-18/s500x750/ca7ba2e2b401dbe4d8674b074179ba3657031a7b.jpg);background-size:100%; height:180px; width:200px; border: 10px solid #fff;][/bg][border=1px solid white;border-radius:70px;background:white;margin:auto;width:30px;height:30px;float-left:10px;][center][size=20px][color=black]➤[/color][/size][/center][/border][/border]

 

[reveriee]

hmm, i'm not sure if float-left is an available feature (take this with a grain of salt), but just for future notice, i believe margin:auto and float contradict each other, so make sure that they aren't in the same [border=][/border]!

instead of using float, i would personally use either position:relative (i'm not too sure where you wanted the arrow but you can adjust the values on your own ^^)

➤​

[border=1px solid black;width:700px;height:200px;background:#E6E4CE;][bg=transparent; background: url(https://64.media.tumblr.com/3942e8c7b762d531437b5f4cabe07755/f8f24befeddb5d3e-18/s500x750/ca7ba2e2b401dbe4d8674b074179ba3657031a7b.jpg);background-size:100%; height:180px; width:200px; border: 10px solid #fff;][/bg][border=1px solid white;border-radius:70px;background:white;margin:auto;width:30px;height:30px;float-left:10px;][center][size=20px][color=black]➤[/color][/size][/center][/border][/border]

or you can use position:absolute (but you should add position:relative to the outermost [border=][/border]; this just allows you to use position:absolute within the margins of that box). this is my preferred method -- shoutout to Uxie for teaching me this

➤​

[border=1px solid black;width:700px;height:200px;background:#E6E4CE;][bg=transparent; background: url(https://64.media.tumblr.com/3942e8c7b762d531437b5f4cabe07755/f8f24befeddb5d3e-18/s500x750/ca7ba2e2b401dbe4d8674b074179ba3657031a7b.jpg);background-size:100%; height:180px; width:200px; border: 10px solid #fff;][/bg][border=1px solid white;border-radius:70px;background:white;margin:auto;width:30px;height:30px;float-left:10px;][center][size=20px][color=black]➤[/color][/size][/center][/border][/border]

hope this helps and good luck!

 

[Uxie]

a little late on this, but the property you're looking for with regards to float is actually float:[value], where [value] can be replaced by either left or right. float-left is, to my knowledge, not a property that exists! any px values for adjustments would have to be put in via margin or position:relative adjustments!

while reveriee has already given you other solutions, i'll touch on how to use the float property to achieve what you wanted! you'd need to add float to both. see below!

➤​

[border=1px solid black;width:700px;height:200px;background:#E6E4CE;][bg=transparent; background: url(https://64.media.tumblr.com/3942e8c7b762d531437b5f4cabe07755/f8f24befeddb5d3e-18/s500x750/ca7ba2e2b401dbe4d8674b074179ba3657031a7b.jpg);background-size:100%; height:180px; width:200px; border: 10px solid #fff; float:left;][/bg][border=1px solid white;border-radius:70px;background:white;width:30px;height:30px;float:left;][center][size=20px][color=black]➤[/color][/size][/center][/border][/border]

i'm scuffed, so i can't really explain why this works exactly other than your elements want to exist on different lines based on how code is since they're both block elements, but i can say that float in this case is really just a different method of achieving what display:inline-block does. you can read about that here: display:inline-block property. they might be able to explain it better than i can! ＼(￣▽￣)／


edit: re-read your first request! and i wanted to add-on that if you want to add another textbox below the arrow, it would be advisable for you to make another container to fit the arrow and textbox within, and then add float to that border only instead of each element. ( ´ ω ` )

 

[houseplant]

Ahh! Thank you both!