There is a parent .inputfields element that has a #buttonsleft block of three buttons, left #buttonsright , and #buttonsright , which must be right aligned.

 body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } p, h1, form, button { border: 0; margin: 0; padding: 0; } .mystyle { border: solid 2px burlywood; background-color: antiquewhite; border-radius: 5px; } .inputfields { display: inline; } .mystyle h1 { text-align: center; font-size: 14px; font-weight: bold; margin-bottom: 8px; } #buttonsright { float: right; width: 30%; } #buttonsleft { float: left; width: 30%; } #buttonsleft input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } #buttonsright input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } 
 <div class="mystyle"> <h1>All values</h1> <div class="inputfields"> <div id="buttonsleft"> <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK=""> </div> <div id="buttonsright"> <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK=""> </div> </div>

The problem is positioning #buttonsright . They either line up vertically from the left edge, or from the right, but lower than the buttons from the #buttonsleft block. Actually the question is how to make the blocks of buttons located exactly opposite each other?

In this case, all elements are .mystyle and, when using float, fall outside the bounds of mystyle example

    2 answers 2

    flex'y for this and created ....

     body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } p, h1, form, button { border: 0; margin: 0; padding: 0; } .mystyle { border: solid 2px burlywood; background-color: antiquewhite; border-radius: 5px; } .inputfields { display: flex; width: auto; height: auto; flex-direction: row; justify-content: space-between; align-items: center; background: orange; } .mystyle h1 { text-align: center; font-size: 14px; font-weight: bold; margin-bottom: 8px; } #buttonsright { display: flex; height: auto; width: 30%; flex-direction: column; justify-content: center; } #buttonsleft { display: flex; height: auto; width: 30%; flex-direction: column; justify-content: center; } #buttonsleft input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } #buttonsright input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } 
     <div class="mystyle"> <h1>All values</h1> <div class="inputfields"> <div id="buttonsleft"> <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK=""> </div> <div id="buttonsright"> <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK=""> </div> </div>

    • With this option, the alignment of the buttonsleft block on the left is due to justify-content: space-between; flies - it moves to the center. - Simatsu Edgeworth
    • Why doesn’t it fly interesting for me? - Air
    • Well ka more if not difficult? - Air
    • Blame, nakosyachil. Copied only css. Thank! - Simatsu Edgeworth
    • ok))) was glad to help .... - Air

    Perhaps this is an option for you:

     .inputfields { display: inline; } .inputfields:after { content: ""; display: table; clear: both; } #buttonsright { float: right; width: 30%; } #buttonsleft { float: left; width: 30%; } #buttonsleft input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } #buttonsright input { font-size: 12px; padding: 4px 2px; border: solid 1px burlywood; width: 100%; margin: 2px 0 20px; border-radius: 5px; display: block; } 
     <div class="mystyle"> <h1>All values</h1> <div class="inputfields"> <br> <div id="buttonsleft"> <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK=""> </div> <div id="buttonsright"> <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK=""> <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK=""> </div> </div> </div>

    • one
      Still clearfix for .inputfields - MedvedevDev
    • @MedvedevDev exactly added. - Dmitry B.
    • All elements have a common ancestor .mystyle, in which they should be. When using float, they drop out of it (added css and screenshot to the question) - Simatsu Edgeworth
    • one
      @ArtemVyazovetskov can you set the height of the .mystyle block small and therefore the elements do not fit? Here is another example. Added background for .mystyle block .mystyle - Dmitry B.
    • The problem here is that in the original these buttons are generated by a cycle based on the value from the database. Their number may vary. When using display the .mystyle block adjusts in size to the number of elements. Example: image.ibb.co/eLuR4F/example.png - Simatsu Edgeworth