[RESOLVED] Problems right bottom aligning css

**FishGuy** · May 3rd, 2011, 05:27 AM

I have a Div which puts a backround colour behind a section of my page.

Within that I have another div which holds a table and another div which is used to hold a button.

I want the button to be aligned to the right of its containing div.

I have attached a picture to show my problem, I need the button to be in its right aligned position but within the green border just above it.
.shadowcontainer {

margin-right: 3px;
margin-bottom: 3px;
margin-top:3px;
background: #F4F4F4;
padding: 10px;

}

div.right-button-container-Grey
{
display:block;
border:1px solid green;
}
div.fullwidth{

width:100%;
position:relative;
}
div.right-button-container-Grey input
{
display:inherit;
position:relative;
bottom:0;
right:0;
float:right;
margin-top:5px;
margin-left:5px;
margin-right:2.5px;

}

**coothead** · May 3rd, 2011, 06:51 AM

Hi there FishGuy,

we really need to see a link to the problematic site or the HTML for the page in question.

**FishGuy** · May 3rd, 2011, 07:28 AM

Here is the HTML

Code:

<body>
<div class="shadowcontainer ">
<div class="fullwidth">
<table class="coursetable1" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                        <th class="leftcol" scope="col">Event Code</th>
                            <th>Start</th>
                            <th>End</th>
                           <th class="leftcol" scope="col">Location</th>
                        <th>Options</th>
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            
                         <td class="leftcol"><asp:Label ID="lblGspEventID" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "GspEventID")%>'></asp:Label><%# DataBinder.Eval(Container.DataItem, "EventID")%></td>
                            <td><%# DataBinder.Eval(Container.DataItem, "StartDate","{0:dd-MMM-yy}")%> </td>
                            <td><%# DataBinder.Eval(Container.DataItem, "EndDate", "{0:dd-MMM-yy}")%></td>
                            <td class="leftcol">
                                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString())%>' CssClass='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) == ""  ? "in-activelink" : "" %>'>HyperLink</asp:HyperLink><a href='<%# DataBinder.Eval(Container.DataItem, "URL").ToString() %>' target="_blank" runat="server"  cssclass='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) == ""  ? "in-activelink" : "" %>'>
                            <%# DataBinder.Eval(Container.DataItem, "LocationName")%></a></td>                            
                           <td>
                                <asp:ImageButton ID="imgBtnViewEvent" runat="server" 
                                                    onclick="Event_Click"   
                                                    AlternateText="View" 
                                                    ImageUrl="~/images/view_doc.png" 
                                                    ToolTip="View Event" 
                                                                                                     />
                            </td>
                    </tr>
                </ItemTemplate>
</table>
</div>
<div class="right-button-container-Grey">
<input type="image" name="ctl00$maincontent$LocationsView$Details" id="maincontent_LocationsView_Details" src="../../images/buttons/new.png" />  

</div>
</div>
</body>

**coothead** · May 3rd, 2011, 08:10 AM

Hi there FishGuy,

try this CSS modification...

Code:


div.right-button-container-Grey {
    /*display:block;*/ /* the div element is a already a block level element */
    border:1px solid green;
    overflow:hidden;
 }

**FishGuy** · May 3rd, 2011, 08:19 AM

overflow:hidden;

Excellent thankyou

**coothead** · May 3rd, 2011, 08:21 AM

No problem, you're very welcome.

Thread: [RESOLVED] Problems right bottom aligning css

Thread Tools

Display

Hybrid View

[RESOLVED] Problems right bottom aligning css

Re: Problems right bottom aligning css

Re: Problems right bottom aligning css

Re: Problems right bottom aligning css

Re: Problems right bottom aligning css

Re: [RESOLVED] Problems right bottom aligning css

Posting Permissions