Question

I have icon, which on click adds new div’s (columns) to div container. The problem is that when new div’s (columns) appears the button doesn’t shift right. Is it possible to somehow add position:fixed only inside the div?

Here is a few screens of what I have

And some code

    <div id="grid">
        <div id="add-col"></div>
        <div class="clear"></div>
        <div id="squares"></div>
    </div>


#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;
}

#add-col{
    margin:5px;
    float:right;
    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

Answer 1

Your CSS would look like this :

#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;

    position:relative; //added

}

#add-col{
    margin:5px;

    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;

    position:absolute; //added
    top:5px; //added
    right:5px; //added

}

With position absolute you can place a button in a corner without having it to move from that position ever again.

To use a position you need to place position:relative; to its parent, else it will fly around the page.

Note: float has been deleted from #add-col