position panel inside a div

Is it possible to position a panel inside a div programmatically.  For example, I have a div with the height of the div set using css.  The content in the panel does not fill the content of the containing div, but I want to position the panel (anchor) to the bottom right of the div.

I'm using a percentage for the height in the containing div, which does not seem to work with the relative/absolute positioning using css because depending on the screen size the position changes.  Therefore I can't use pixels to position.

I know a table layout can kind of accomplish this, but I need to use divs that is semantically correct.  Is this possible?

Thank you.
|-------------------------------|
|                               |
|         div                   |
|                               |
|                   |-----------|
|                   |  panel    |
|                   |           |
|-------------------|-----------|

Open in new window

-Dman100-Asked:
Who is Participating?
 
hehdaddyConnect With a Mentor Commented:
Hi there,

If your containing DIV has position:absolute, then your panel can use position:absolute with a bottom: 0 and right: 0

Like this messy example:
<div style="width:50%; height: 40%; border: solid 1px Red; position:absolute;">
    
    <asp:Panel ID="p1" runat="server" style="position:absolute; bottom:0; right:0; border: solid 1px Green; height:20%; width:10%">Test</asp:Panel>
    <br /><br /><br /><br />
    </div>

Open in new window

0
 
Christian de BellefeuilleProgrammerCommented:
I don't know if it work, but i would try something like this

<div style="vertical-align:bottom;" align=right></div>
0
 
Christian de BellefeuilleProgrammerCommented:
hehdaddy is right.  Forget what i said.  I just noticed that all my content in the div would be right aligned and that's probabl not what you want.
0
All Courses

From novice to tech pro — start learning today.