CSS Absolute Positioning

I have a div inside a field set that looks like this:

        <fieldset> 
            <legend>Device</legen开发者_开发技巧d> 
            <label id="select-6-container">     
                <select id="select-6" name="device_select" style="display:none"></select>       
            </label> 
        </fieldset> 

        <div id="ctrl"> 
        <button type="button" id="restart1" name="button1" onclick="window.location.reload()" value="Restart Wizard">Restart Wizard</button> 
        <button type="button" id="gotostep2" class="gotostep2" name="button1" value="Next Step">Next Step</button> 
        </div>

My select box is populated with YUI and then shown (notice that its hidden on load). My CSS for the box looks like this:

#ctrl {
margin-top: 102px;
margin-left: -200px;
position: absolute;
width:100px;
  }

But when My select box is generated, the ctrl box moves down everytime! Do I have my CSS wrong? Or is it because the select box is generated by Javascript after the page has loaded?

I should mention that when YUI renders the select box as a menu button it changes it's markup to be a button, I didn't think this should matter because the positioning of ctrl is what I'm trying to change.

Any advice would help! Thanks!

Your div doesn't seem to be inside the fieldset, as you had mentioned. Try to assign a position to the div using top, right, bottom and/or left. The div's position will be then depending on the next positioned parent element, so have an eye on that as well.

If all of this doesn't work — please post as well the surrounding mark–up and CSS.