Results 1 to 6 of 6

Thread: [RESOLVED] Problems right bottom aligning css

  1. #1

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    Resolved [RESOLVED] Problems right bottom aligning css

    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;

    }
    Attached Images Attached Images  

  2. #2
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Problems right bottom aligning css

    Hi there FishGuy,

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


    ~ the original bald headed old fart ~

  3. #3

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    Re: Problems right bottom aligning css

    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>

  4. #4
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Problems right bottom aligning css

    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;
     }
    


    ~ the original bald headed old fart ~

  5. #5

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    Re: Problems right bottom aligning css

    overflow:hidden;

    Excellent thankyou

  6. #6
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: [RESOLVED] Problems right bottom aligning css

    No problem, you're very welcome.


    ~ the original bald headed old fart ~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width