How would I align buttons and images next to each other?

Question

I have been testing and looking for ways for this to work. I used this question as help, but now I cannot get the images to be to the right of the payment method buttons.

Evenly Space DIVs Vertically

Here is my code:

.right-column {
  background-color:#f6f7f9;
  border: solid 1px lightblue;
  height:1078px;
        padding:15px;
 }
 .row-heading {
  text-align:center;
  padding:0;
 }
 .payment-img {
  width:84px;
  height:100%;
        padding:0 0 0 15px;
 }
 .paypal-payment {
  width:150px;
  height:45px;
 }
 .cash-payment {
 }
 .payment-rows {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
 }
 .payment-form {
  padding:0;
 }
 .payment-method-checkbox {
  padding:50px 0 0 0;
  font-size:15px;
 }
 .payment-method {
  border:1px solid white;
  background-color:#4ab847;
  color:white;
  height:35px;
  width:100%;
  font-size:12px;
  font-weight:bold;
  text-align:center;
 }
 .payment-method:hover, .payment-method:focus, .payment-method:active {
  color: #4DB748;
  background-color: #ffffff;
  border-color: #4DB748;
 }
 .terms-conditions {
  color:dodgerblue;
 }
 .right-column {
  height:501px;
 }
 .row-heading {
  font-size:22px;
 }
 .reservation_summary, .total_costs {
  font-size:22px;
 }
 .div-btn-paypal, .div-btn-cash, .div-btn-visa  {
        padding:0;
 }
    .visa-payment {
        padding:0;
    }

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
        <h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
        <div class="payment-form">
            <form class="payment-form-start" action="/action_page.php">
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-paypal">
                        <input type="button" class="payment-method" value="PayPal">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
                    </div>
                    <br>
                </div>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
                        <input type="button" class="payment-method" value="Cash">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
                    </div>
                </div>
                <br>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
                        <input type="button" class="payment-method" value="MasterCard/Visa">
                        <br>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
                        <img class="payment-img" src="/images/base/maestro.png">
                        <img class="payment-img" src="/images/base/mastercard.png">
                        <img class="payment-img" src="/images/base/visa.png">
                    </div>
                </div>
                <br>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
                    <input type="checkbox" class="payment-method-checkbox" required="">
                    <span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms &amp; Conditions</a></span>
                </div>
            </form>
        </div>
    </div>

I haven't read and don't agree to the Terms & Conditions . On a serious note please share also the HTML so we can reproduce your current situation — Mihai T, Mar 05 '20 at 13:34
I edited your question with a code snippet. Please use this in the future. Is the `[<>]` button in the edit toolbar. Is this your current situation ? — Mihai T, Mar 05 '20 at 13:37
This is my current situation. But the buttons aren't as wide as it is showing in the code snippet. — Kristofer Schultheis, Mar 05 '20 at 13:39
So it's NOT your current situation then. Are you using bootstrap ? Because i see some bootstrap classes — Mihai T, Mar 05 '20 at 13:40

Mihai T · Accepted Answer · 2020-03-05T14:09:07.810

There are a bunch of logic problems.

Your buttons are inside a div with class col-12 which means 100% width. ( bootstrap class ). Solution : use col-8 on buttons and col-4 on images. Or other classes that when added equal 12. ( 10+2, 9+3, 8+4 and so on )

Then, you use flex-direction: column on the payment-row. You need to set row or leave empty because row is default.

You will also need to tweak the css a little bit.

Also. Do not use float for layout. Especially when you are already using bootstrap which uses flexbox. And make use of boostrap classes like row on rows and .container and so on

Read more about bootstrap grid system here -> bs grid

Read more about about flexbox -> flexbox MDN

.right-column {
  background-color:#f6f7f9;
  border: solid 1px lightblue;
  height:1078px;
        padding:15px;
 }
 .row-heading {
  text-align:center;
  padding:0;
 }
 .payment-img {
  width:84px;
  height:100%;
        padding:0 0 0 15px;
 }
 .paypal-payment {
  width:150px;
  height:45px;
 }
 .cash-payment {
 }
 .payment-rows {
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
 }
 .payment-form {
  padding:0;
 }
 .payment-method-checkbox {
  padding:50px 0 0 0;
  font-size:15px;
 }
 .payment-method {
  border:1px solid white;
  background-color:#4ab847;
  color:white;
  height:35px;
  width:100%;
  font-size:12px;
  font-weight:bold;
  text-align:center;
 }
 .payment-method:hover, .payment-method:focus, .payment-method:active {
  color: #4DB748;
  background-color: #ffffff;
  border-color: #4DB748;
 }
 .terms-conditions {
  color:dodgerblue;
 }
 .right-column {
  height:501px;
 }
 .row-heading {
  font-size:22px;
 }
 .reservation_summary, .total_costs {
  font-size:22px;
 }
 .div-btn-paypal, .div-btn-cash, .div-btn-visa  {
        padding:0;
 }
    .visa-payment {
        padding:0;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
        <h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
        <div class="payment-form ">
            <form class="payment-form-start" action="/action_page.php">
                <div class="payment-rows">
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-3 div-btn-paypal">
                        <input type="button" class="payment-method" value="PayPal">
                        <br>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
                    </div>
                    <br>
                </div>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
                        <input type="button" class="payment-method" value="Cash">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
                    </div>
                </div>
                <br>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
                        <input type="button" class="payment-method" value="MasterCard/Visa">
                        <br>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
                        <img class="payment-img" src="/images/base/maestro.png">
                        <img class="payment-img" src="/images/base/mastercard.png">
                        <img class="payment-img" src="/images/base/visa.png">
                    </div>
                </div>
                <br>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
                    <input type="checkbox" class="payment-method-checkbox" required="">
                    <span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms &amp; Conditions</a></span>
                </div>
            </form>
        </div>
    </div>

score 0 · Answer 2 · answered Mar 05 '20 at 13:52

0

set flex-direction : row in payment-row class in your css

answered Mar 05 '20 at 13:52

Sharvan Sharma

1
2

How would I align buttons and images next to each other?

2 Answers2