Trying to modify this pet profile: HERE

code

<style> /* A free Pet Profile created by FallenSamurai, avaliable at https://subetagraphics.proboards.com */ /* ------------------ Overall ------------------ */ html { margin: auto !important; width: 100%; height: 100%; background: url() no-repeat; background-color: ; } body { width: 760px; height: auto; margin: 0 auto; position: relative; background: transparent; margin-top: 50px; margin-bottom: 50px; font-size: 10px; color: ; } h2, , , , , , , , , .pet_age_info_date, .pet_wco_info_date { display:none; } a:link, a:visited, a:hover { color: ; } , { height: auto !important; background-color: rgba(255,255,255,1); margin-left: 0px; padding: 0px; min-width: 100%; } { background: transparent; } { width: auto; padding: 25px 25px 0; } /* ------------------ DO NOT TOUCH ------------------ */ ::after { content: 'free profile by FallenSamurai @ subetagraphics.proboards.com'; font-size: 9px; margin-left: 5px; } /* ------------------ END DO NOT TOUCH ------------------ */ /* ------------------ Minion ------------------ */ { width: 200px; height: 163px; margin: 0; padding: 0; font-size: 10px; } /* ------------------ Pet Info ------------------ */ { width: 290px; } .pet_name { font-family: georgia; } .pet_color_info { position: relative; top: -15px; } .owner { position: relative; top: -15px; } { width: 250px; height: 250px; margin: 0 auto; background-position: 50% 50%; background-repeat: no-repeat; } /* ------------------ Stats ------------------ */ { display:none; } /* ------------------ Spotlight ------------------ */ .pet_spotlight { position: absolute; left: 525px; top: 15px; width: 210px; height: 163px; padding-top: 20px; font-size: 10px; } /* ------------------ Pet Treasure ------------------ */ { } .treasure_item { margin-right: 6px; margin-bottom: 6px; } .treasure_item img, .treasure_item { width: 64px; height: 64px; } /* ------------------ Pet Description ------------------ */ { padding-bottom: 20px; padding-top: 20px; } /* ------------------ Pet Friends ------------------ */ { } .friend_div { display: block; height: auto; margin: 3px; padding: 5px; text-align: center; width: 100px; } </style>

I want to put the image that's in the description on the right side of the box and I want to put the treasure over the description, but I can't work it out.

so for the image alignment you would do this:

and to put the treasure above the description, you would simply change the top position values for each:

{position:absolute; top:450px} {position:absolute; top:650px}

you might have to fiddle with those values to get them exactly where you want, and if the treasure chest gets longer (i.e. you add more items) you will have to move the description lower (so, increase the top position value).

Thank you so much for the help! I didn't express myself clearly. I meant, how do I put the image outside the box on the right hand side (or left) of the profile?

ah, to do that you would need to create a new div, let's say you'll call it something simple like 'picture'. so inside the style tags you would put this:

{position:absolute; top:XXpx; left:XXpx; height:XXpx; width:XXpx; background:url(IMAGE URL) no-repeat}

you'll have to play with the top and left position values until it's where you want it, and make sure the height and width values are exactly the same as they are on the linked image. then outside the style tags, put this:

and it should show up :)

That works super well! Thanks so much for your help! :D

you're welcome 😊