CODEWITHSUNDEEP
htmlcss
Andrew Latham
Andrew Latham

Reputation: 6152

Positioning when parent isn't position: relative

I have a button inside of a parent div. I would like the button to be in the upper-right of the div.

If the parent div had its CSS position set to relative, I would just make the button's position: absolute and top: 0px and right: 0px or something along those lines (right would actually be dynamically based on the size of the button).

The problem is, someone else made the div, it has no position attribute, and I can't change its style. How can I still position this button where I want it?

Example HTML:

<div id="someone_elses_div">
  <button id="my_button">Hello World</button>
</div>

Upvotes: 0

Views: 51

Answers (2)

jhawes
jhawes

Reputation: 2374

I'm not sure if this will help, but are you unable to change the parent's position due to not having access alone? If so, you could just use some jQuery to add the position.

$(document).ready(function () {
     $('#someone_elses_div').css({
          'position':'relative'
     });
});

Upvotes: 0

Banana
Banana

Reputation: 7484

You could use the css calc() to calculate left margin for the button according the the div's width: FIDDLE

as you can see, almost all current browsers support calc(): CALC()

css:

#someone_elses_div{
    background:red;
    height:100px;
    width:70%;
}
#my_button{
    width:100px;
    margin-left:calc(100% - 100px);
}

Upvotes: 2

Related Questions