Question

This piece of code works, but I would like to know if it is the best way to place a dom element on the top right of a container.

the prerequisites are the following:
1) the DOM cannot be changed.
2) the CSS code with comment with original code cannot be changed.

demo: http://jsfiddle.net/jBme9/1/

---

<div class="control-group">
    <div class="controls">
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize2">
                </div>
            </div>
        </div>
        <button type="button" class="btn" data-toggle="collapse" data-target="">
            Edit
        </button>
    </div> 
</div>

---

.controls button{
    float: right;
    position:absolute;
    top:0px;
    right: 0px;
}

/* original code */
.control-group {
    background-color: #D9EDF7;
    padding: 13px;
    margin-bottom: 20px;
}
/* original code */
input {
    box-sizing: border-box;
    height: auto;
    padding: 8px 4px;
    width: 100%;
}
​

Answer 1

You can simply do what you have done, but if you want to place that somewhere in the middle of your web page you need to have an outer div with position: relative;

First of all things you wont need :

1) float: right; /* In .controls button */

2) You have a class called .btn so you don’t need .controls button simply use .btn else your styles will apply to all buttons in .controls

3) button doesn’t require type=button attribute…(Unless you are not using it to reset/submit anything than you need to specify)

My Fiddle