Positioning a div inside a div without affecting layout

I have a div (div1) that has its position, width, height, everything all set, and it is set externally, so I can't know ahead of time what those values are.

Inside and 开发者_高级运维at the top of div1 is another div (div2). I want div2 to float on the right of div1 without affecting the following information in div1.

I can add the attribute position:absolute and get div2 to float and not affect the contents, however, I cannot get it to float on the right, even when applying float:right.

If I understand correctly:

First, apply position: relative to your div1.

As it "won't work" when you have both float: right and position: absolute on your div2, you should replace the float: right rule with right: 0.

try this:

position: absolute;
right: 0;
top: 0;

with just relative positioning?

<div style="height:300px;width:300px;position:relative;background-color:red">
  <div style="height:100px;width:100px;position:relative;float:right;background-color:yellow">
</div>

Have you tried placing the other contents of div1 into another div, then setting a specified width on that div while keeping float:right on div2. Sounds like a sidebar style scenario.