How to place 2 divs 1 in the middle and 1 on the right side

Question

I would like to place my 2 divs(1 in the middle and 1 on the right side). Here's my codes. I am not sure if its right or wrong sorry. I would like to have the same output as the picture.

https://i.stack.imgur.com/OXqpW.png

here's my code

 <div class="payment " style="background-color: #370a0c;padding: 1px 0;background-image: url(image/rectangle2.png);background-repeat: no-repeat;background-position: right;background-size: 230px 79px; ">
                <div id="payment_row" class="row " style="width: 100%; text-align:center; padding-top: 20px; ">
                    <div class="col-9 ">
                        <ul class="payment-list" style="display: flex; margin: auto; ">
                            <li style="padding-right: 20px; ">
                                <a href=" "><img src="image/visa.png " alt=" "></img>
                                </a>
                            </li>
                            <li style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/Mastercard.png " alt=" "></img>
                                </a>
                            </li>
                            <li style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/amex.png " alt=" "></img>
                                </a>
                            </li>
                            <li style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/paypal.png " alt=" "></img>
                                </a>
                            </li>
                            <li class="payment-list-2" style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/discover.png " alt=" "></img>
                                </a>
                            </li>
                            <li class="payment-list-3" style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/Maestro.png " alt=" "></img>
                                </a>
                            </li>
                            <li class="payment-list-3" style="padding-right: 20px; ">
                                <a href=" "></a><img src="image/skrill.png " alt=" "></img>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div id="payment" class="col-2 " style="display:flex; ">
                        <ul style="display: flex; margin-right: 3px; margin-left: -70px;">
                            <a href=" "></a><img id="player_img" src="image/icon-people.png " alt=" " style="width: 47px;height: 47px;margin-top: -8px;"></img>
                        </ul>
                        <ul style="margin-left: -28px;">
                            <li>
                                <h1 id="player_num" style="font-size: 35px; line-height: 15px; margin-right: 45px; ">
                                    21,765
                                </h1>
                            </li>
                            <li id="player_count" style="line-height: 15px; margin-right: 15px; margin-left: -30px;margin-top: 11px;">
                                Online Players
                            </li>
                        </ul>
                    </div>

help me please thank you!

Provide example with an online code editor like https://codepen.io/ — Abdullah Mansoor, Jul 05 '21 at 03:35

score 1 · Answer 1 · answered Jul 05 '21 at 03:44

You appear to be using some sort of framework like Bootstrap (with col-), which handles the responsiveness for you. In this case you should consider the container 'width' to be made up of 12 'units'. A combination of col-3 + col-6 + col-3 would equal 12, with more 'space' occupied by the central element.

Outside of frameworks, you're on the right track with attempting to use flexbox. Though note that you shouldn't be applying margin to flexbox (and you should never use inline styles).

Here's a very stripped down example of how to configure this using flexbox. All you need is display: flex on the container, and flex: 1 on the three elements you want to align next to one another. Note that you can even use an empty element if you don't want three, as can be seen below:

.container {
  display: flex;
}

.container ul {
  flex: 1;
}

<div class='container'>
  <ul>
    <!-- Empty Left Column -->
  </ul>
  <ul>
    Payment List
  </ul>
  <ul>
    <li>
      <h1 id="player_num">
        21,765
      </h1>
    </li>
    <li id="player_count">
      Online Players
    </li>
  </ul>
</div>

score 0 · Accepted Answer · answered Jul 05 '21 at 03:36

You can create a container with 2 children and add margin-left: auto; to both of the child and they will align as you wanted.

Below is just a POC

.flex-container {
  display: flex;
  align-items: center;
  background: darkred;
  color: white;
}

.flex-container>* {
  margin-left: auto;
}

.list {
  display: flex;
}

.list>ul {
  list-style-type: none;
  display: flex;
}

.list>ul>li+li {
  margin-left: 1rem;
}

<div class="flex-container">
  <div class="list">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div>count:213213</div>
</div>

How to place 2 divs 1 in the middle and 1 on the right side

2 Answers2