locked
How to align buttons across rows in a div using css RRS feed

  • Question

  • User1016820894 posted

    I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across. What am I doing wrong?

    Here is the code I am using:

    <style>
    
      .col-sm-8 {
        width: 66.66666666666666%;
      }
    
    .panel-heading {
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
    }
    
    .panel-title {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 16px;
    }
    
    .panel-body {
      padding: 15px;
        width: 221px;
        margin-bottom: 0px;
    }
    
    .row {
      margin-right: -15px;
      margin-left: -15px;
    }
    
    .rows .btn {
        margin-left:15px;
      }
    
    
    .bg-color-aliceblue {
            background-color: aliceblue;
    }
    
    .panel-green {
        background-color: #1cca48;
    }
    
    .height1 {
        height: 390px;
    }
    
      .btn-activity  {
      background: #082e75;
      border-radius: 10px;
      color: #ffffff;
      font-size: 13px;
      font-weight:bold;
      width: 210px;
      height: 50px;
       white-space:normal;
       display:table;
      
    }
    
    div.opacity1 {
        opacity: 0.8;
    }
    
    
    </style>
    
    <div class ="row" >
      <div class="col-sm-8" STYLE=";top:200px;left:485px;">
          <div class="opacity1">
            <div class="bg-color-aliceblue">
               <div class="panel-green">
                 <div class="panel-heading">
                 </div>
               </div>
               <div class="panel-body" STYLE="opacity:0.8;;">
                <div class="height1">
                    <div class="rows">
                    <asp:Button ID="btnact1" class="btn btn-activity" runat="server" OnClick="btnact1_Click" />
                    <asp:Button ID="btnact2" class="btn btn-activity" runat="server"  />
                    <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server"  />
                  </div>
                </div>
            </div>
            
        </div>
       </div>
      </div>
    </div> 

    Tuesday, September 27, 2016 2:23 PM

Answers

  • User2103319870 posted

    I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across.

    You need to increase the width of panelbody(container for all buttons) and then float the button left like below

     <style>
            .col-sm-8 {
                width: 66.66666666666666%;
            }
    
            .panel-heading {
                padding: 10px 15px;
                border-bottom: 1px solid transparent;
                border-top-right-radius: 3px;
                border-top-left-radius: 3px;
            }
    
            .panel-title {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 16px;
            }
    
            .panel-body {
                padding: 15px;
                width: 700px;
                margin-bottom: 0px;
            }
    
            .row {
                margin-right: -15px;
                margin-left: -15px;
            }
    
            .rows .btn {
                margin-left: 15px;
            }
    
    
            .bg-color-aliceblue {
                background-color: aliceblue;
            }
    
            .panel-green {
                background-color: #1cca48;
            }
    
            .height1 {
                height: 390px;
            }
    
            .btn-activity {
                background: #082e75;
                border-radius: 10px;
                color: #ffffff;
                font-size: 13px;
                font-weight: bold;
                width: 210px;
                height: 50px;
                white-space: normal;
                display: table;
            }
    
            div.opacity1 {
                opacity: 0.8;
            }
        </style>
    
    <div class="row" >
      <div class="col-sm-8" STYLE=";top:200px;left:485px;">
          <div class="opacity1">
            <div class="bg-color-aliceblue">
               <div class="panel-green">
                 <div class="panel-heading">
                 </div>
               </div>
               <div class="panel-body" STYLE="opacity:0.8;">
                <div class="height1">
                    <div class="rows" >
                    <asp:Button ID="btnact1" cssclass="btn btn-activity" runat="server" style="float:left;" />
                    <asp:Button ID="btnact2" cssclass="btn btn-activity" runat="server" style="float:left;"/>
                    <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server" style="float:left;" />
                  </div>
                </div>
            </div>
        </div>
       </div>
      </div>
    </div> 
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 27, 2016 2:51 PM

All replies

  • User2103319870 posted

    I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across.

    You need to increase the width of panelbody(container for all buttons) and then float the button left like below

     <style>
            .col-sm-8 {
                width: 66.66666666666666%;
            }
    
            .panel-heading {
                padding: 10px 15px;
                border-bottom: 1px solid transparent;
                border-top-right-radius: 3px;
                border-top-left-radius: 3px;
            }
    
            .panel-title {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 16px;
            }
    
            .panel-body {
                padding: 15px;
                width: 700px;
                margin-bottom: 0px;
            }
    
            .row {
                margin-right: -15px;
                margin-left: -15px;
            }
    
            .rows .btn {
                margin-left: 15px;
            }
    
    
            .bg-color-aliceblue {
                background-color: aliceblue;
            }
    
            .panel-green {
                background-color: #1cca48;
            }
    
            .height1 {
                height: 390px;
            }
    
            .btn-activity {
                background: #082e75;
                border-radius: 10px;
                color: #ffffff;
                font-size: 13px;
                font-weight: bold;
                width: 210px;
                height: 50px;
                white-space: normal;
                display: table;
            }
    
            div.opacity1 {
                opacity: 0.8;
            }
        </style>
    
    <div class="row" >
      <div class="col-sm-8" STYLE=";top:200px;left:485px;">
          <div class="opacity1">
            <div class="bg-color-aliceblue">
               <div class="panel-green">
                 <div class="panel-heading">
                 </div>
               </div>
               <div class="panel-body" STYLE="opacity:0.8;">
                <div class="height1">
                    <div class="rows" >
                    <asp:Button ID="btnact1" cssclass="btn btn-activity" runat="server" style="float:left;" />
                    <asp:Button ID="btnact2" cssclass="btn btn-activity" runat="server" style="float:left;"/>
                    <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server" style="float:left;" />
                  </div>
                </div>
            </div>
        </div>
       </div>
      </div>
    </div> 
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 27, 2016 2:51 PM
  • User1016820894 posted

    That worked! Thanks!!

    Thursday, September 29, 2016 3:34 PM