CODEWITHSUNDEEP
htmlcss
Rashid Abib
Rashid Abib

Reputation: 189

Right Align Button Inside Div Tag

Is it possible to have a label left aligned and a button right aligned all within a div tag? My label aligns perfectly, my button is not even close (may even be appearing outside of the div tag. Can someone assist?

<div id="PlaceHolder" runat="server" visible="false">
  <asp:Label runat="server" ID="lblDisplay" CssClass="BoldTextBlack"> </asp:Label>
  <asp:Button runat="server" ID="btnRollBack" CssClass="Buttons" style="float:right"
    Text="Roll Back Last Change" OnClick="btnRollBack_Click" Height="30px" Width="119px" /> 
</div>

After additional testing it seems that adding in the style="float:right" is what skews the alignment

Upvotes: 0

Views: 8030

Answers (1)

Andrea
Andrea

Reputation: 849

You can use absolute positioning to put the label and button where you want them. You want them positioned relative to your #Placeholder div, so you need to add to the CSS there as well.

Adding position: relative; to PlaceHolder shouldn't change how that div looks, but it tells the browser to position any enclosed, absolutely-positioned elements in relation to THIS div, instead of another one/the page as a whole:

#PlaceHolder {
   position: relative;  
}

Then we can use absolute positioning to get the label and button exactly where we want. I don't have your design specs, so I'm making things up for the actual measurements :)

We'll tell the label to position its left edge exactly 10px from the left edge of #PlaceHolder, and its bottom edge 10px up from the bottom edge of #PlaceHolder. 

#lblDisplay {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

Now we'll tell the button to position its right edge exactly 10px from the right edge of #PlaceHolder, and its bottom edge 10px up from the bottom edge of #PlaceHolder.

#btnRollBack {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

Upvotes: 2

Related Questions