Align image above another image

[tshad]

<asp:Button ID="AddQuestion" Text="Add Question" runat="server" 
    CommandName="AddRow" CommandArgument="AddRow"></asp:Button>
<div align="right" style="vertical-align:text-top">
	<asp:linkButton id="deselect" visible="true" text="Deselect Row" CommandName="Deselect" 
        style="vertical-align:middle" OnClick="DeselectQuestionsRow" runat="server"/>&nbsp;&nbsp;&nbsp;&nbsp;
	<asp:ImageButton ID="UpQuestion" text="Move Up" visible="true" runat="server" 
        ImageUrl="/images/arrowUp.gif" style="height:16px;width:16px;vertical-align:top" CommandName="Up"
        OnClick="MoveQuestionRowUp"  AlternateText="^"/>
	<asp:ImageButton ID="DownQuestion" text="Move Down" visible="true" runat="server" 
        ImageUrl="/images/arrowDown.gif" style="height:16px;width:16px;;vertical-align:bottom" CommandName="Down"
            OnClick="MoveQuestionRowDown" AlternateText="v"/>
</div>

I have the following with a button that I want on the right side of my footer and a link and 2 images on the right side.

What have here works fine.

But now I would like to get the first image over the 2nd so that the up arrow image is above the down arrow.

I tried various combinations of floats but can't seem to get it to work.

Is there a way to do that?

Thanks,

Tom

 

[jbenson001]

You'd be best of posting your question here:
forum215

 

[Qik3Coder]

jbenson001,
That is a "more appropriate" location for this, but as he didn't re-post, I'll answer it here.

tshad,
Float will only move things left or right.

You need a container, with a fixed width, that forces the items in it to stack.
Something like this:

<span style="width: 32px">
<img src="..\images\up.png"/>
<img src="..\images\down.png"/>
</span>

Lodlaiden

You've got questions and source code. We want both!
Here at tek tips, we provide a hand up, not a hand out.

 

[tshad]

That was it.

I just added a span(or div) and some float elements to get it where I wanted and it worked fine.

<div align="right" style="vertical-align:text-top">
    <span style="width: 18px;float:right;margin-right:17px">
		<asp:ImageButton ID="UpQuestion" text="Move Up" visible="true" runat="server" 
            ImageUrl="/images/arrowUp.gif" style="height:16px;width:16px;vertical-align:top" CommandName="Up"
            OnClick="MoveQuestionRowUp"  AlternateText="^"/>
		<asp:ImageButton ID="DownQuestion" text="Move Down" visible="true" runat="server" 
            ImageUrl="/images/arrowDown.gif" style="height:16px;width:16px;;vertical-align:bottom" CommandName="Down"
                OnClick="MoveQuestionRowDown" AlternateText="v"/>
    </span>
	<asp:linkButton id="deselect" visible="true" text="Deselect Row" CommandName="Deselect" 
        style="vertical-align:middle;float:right;margin-right:20px;margin-top:10px" OnClick="DeselectQuestionsRow" runat="server"/>
</div>

Thanks,

Tom