Want to Display Div Content in Top-Right Position

Hi friends,


I have got 3 div boxes and their coding sequence is:
Div box 1
Div box 2
Div box 3

I need your help to display Div box 3 in top-right corner of outer Div box without changing coding sequence of box 1,2,3.

Here is my code:

--------------------------------

<div style="width:560px; height:560px;">
<div style="width:430px; height:125; float:left">
<p><strong>This is a box 1 </strong><br>
</p>
</div>

<div style="float:left; width:560px;"><strong>This is box 2 </strong></div>

<div style="width:125px; height:125px; vertical-align:top; float:right;">
<p><strong>This is box 3 </strong></p>
<p><strong>product box </strong></p>
</div>
</div>

 

You can try this:

<div style="width:560px; height:560px;position:relative;">
<div style="width:430px; height:125; float:left">
<p><strong>This is a box 1 </strong><br>
</p>
</div>

<div style="float:left; width:560px;"><strong>This is box 2 </strong></div>

<div style="width:125px; height:125px; position:absolute; top:0; right:0;">
<p><strong>This is box 3 </strong></p>
<p><strong>product box </strong></p>
</div>
</div>

 

Hi GWiz,

I tried & implemented your solution. It's working fine. Thanks for your help.