locked
Changing label position to the right RRS feed

  • Question

  • User-1994446809 posted

    Hello forum,

    I have two label controls (1 and 0) in a <div col-md-6> tag; I want to place one label on the top right of the <div> tag and the other on the top left of the same <div>tag. But it appears that when these labels are inside a <div> tag, they seem not to respond to CSS or even javascript.

    I want to put "1" to the left and "0" to the right.

    below is my HTML and CSS

    <style type="text/css>
    .lbl4{ 
    float: right;
    }
    
    #lblupld{
    float: left;
    }
    </style>

    HTML 

     <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <div class="row" style="font-family:Comfortaa;font-size:12pt;font-weight:bolder;">
                                                <asp:Label ID="recptlbl" runat="server" Text="1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                              &nbsp;<div class="lbl4">
                                                  <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label>
                                                    </div>
                                                </div>
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" />&nbsp;Reciepts</h3>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click"/>
                                            </div>
                                        </div>
                                    </div>

    Monday, November 2, 2020 1:45 PM

Answers

  • User-939850651 posted

    Hi georgeakpan233,

    According to your description, I created a simple example using the code you provided, and I modified part of the style code:

    <head runat="server">
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <title></title>
        <style type="text/css">
            #recptlbl {
                width: 50%;
            }
    
            .lbl4 {
                width: 50%;
            }
    
            #lblupld {
                margin: 0;
                float: right;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                            <div class="col p-4 d-flex flex-column position-static">
                                <div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
                                    <asp:Label ID="recptlbl" runat="server" Text="1" />
                                    <div class="lbl4">
                                        <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label>
                                    </div>
                                </div>
                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" />&nbsp;Reciepts</h3>
                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Info" Style="font-family: Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    Result:

    If I misunderstood something, please let me know.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 3, 2020 5:42 AM

All replies

  • User-939850651 posted

    Hi georgeakpan233,

    According to your description, I created a simple example using the code you provided, and I modified part of the style code:

    <head runat="server">
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <title></title>
        <style type="text/css">
            #recptlbl {
                width: 50%;
            }
    
            .lbl4 {
                width: 50%;
            }
    
            #lblupld {
                margin: 0;
                float: right;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                            <div class="col p-4 d-flex flex-column position-static">
                                <div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
                                    <asp:Label ID="recptlbl" runat="server" Text="1" />
                                    <div class="lbl4">
                                        <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label>
                                    </div>
                                </div>
                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" />&nbsp;Reciepts</h3>
                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Info" Style="font-family: Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    Result:

    If I misunderstood something, please let me know.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 3, 2020 5:42 AM
  • User-1994446809 posted

    Hi XuDong Peng,

    Yes. It is working. Thank you. I don't know how to thank you well enough, I really appreciate your help.

    Tuesday, November 3, 2020 9:11 AM