How to position an element next to another an element of undefined position?

Question

Hi, I am very new to html/xml/css and I'm trying my best to teach myself. However, I have run into a problem that a Google search could not solve.

I would like to position a small image in a fixed location relative to another element(?)

I believe this is the code of the element i want to position the second element relative to.

<style type="text/css">
 #wrap { 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;         
    border-left:1px solid #ccc; 
}

 #container {
     width: 500px;
      margin:0 auto;
     padding: 25px;
      font-size:.85em;
     background-color: #fff;
 }

and this is partial code I'm trying to edit to position .xyz to the right of "#wrap"

.xyz {
    position: ???;
    top: 200px;
    right: ???;
    _position: ???;
    _margin: ???;
    _text-align: right;
    z-index: 1337;
}

my search of SOF has lead me to believe i'm supposed to do something along the lines of this - http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css - but i haven't been able to.

I greatly appreciate any help you may offer. Hopefully I've explained my problem properly.

Answer 1

If you want .xyz inside of #wrap but on the right side, doing a float:right; on your .xyz element will achieve what you want.

EDIT: try something like this:

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

then css wise:

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}