fixing one div to second div top right corner with css

Question

I have the following divs

<div id="outer"><img src="myimgpath"><div id="name">Username</div></div>

How do I fix the inner div to the outer div's top right corner?

Answer 1

Try something like this:

#outer {
  position: relative;
  overflow: hidden;
  height: 100px;
}

#name {
  position: absolute;
  right: 0;
}

Answer 2

<div id="outer" style="position:relative">
  <img src="myimgpath">
  <div id="name" style="position:absolute; top:0px; right:0px;">Username</div>
</div>