Hello, I have a column. It has two col-6 grids (bootstrap). In these grids there is a Text and a picture. When I give the value in the left column in the picture float: left; , and text also float: left; , then everything is fine ( https://prnt.sc/fm38f1 ), but what to do in the right column? I need the text and the picture to the right, but also that this picture was just to the left of the text as in https://prnt.sc/fm38f1 . After all, by doing the same, it turns out https://prnt.sc/fm3944 . How to proceed? Here is the code:

HTML

 <div class="container"> <div class="col col-md-6" > <img class="totallisthimg" id="totallist-left" src="/assets/img/l1.png"> <p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> </div> <div class="col col-md-6"> <img class="totallisthimg" src="/assets/img/l2.png"> <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> </div> </div>

CSS

 #totallist-left { font-weight: normal; float: left; } #totallist-right { font-weight: normal; float: right; } .totallisth { font-weight: 400; font-size: 23px; text-align: left; } .totallisthimg { float: left; height: 100px; width: 100px; margin-right: 1%; }

Here are the screenshots:

    2 answers 2

    Good afternoon, you need to center not the pictures and the text, but the div containers themselves and everything will work as expected. I can offer a variant on flex-box

     .container{ display: flex; justify-content: space-between; } .totallisth { font-weight: 400; font-size: 10px; font-weight: normal; white-space: nowrap } .totallisthimg { float: left; height: 30px; width: 30px; margin-right: 1%; } 
      <div class="container"> <div class="col col-md-6" > <img class="totallisthimg" id="totallist-left" src="blink.png"> <p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> </div> <div class="col col-md-6"> <img class="totallisthimg" src="blink.png"> <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> </div> </div>

    Here is an option without flex if it is more than 2x

      .container{ text-align: justify; } .container:after{ content: ''; display: inline-block; width: 100%; } .container>*{ display: inline-block; margin: 5px 0; } .totallisth { font-weight: 400; font-size: 10px; font-weight: normal; white-space: nowrap } .totallisthimg { float: left; height: 30px; width: 30px; margin-right: 1%; } 
      <div class="container"> <div class="col col-md-6" > <img class="totallisthimg" id="totallist-left" src="blink.png"> <p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> </div> <div class="col col-md-6"> <img class="totallisthimg" src="blink.png"> <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> </div> <div class="col col-md-6"> <img class="totallisthimg" src="blink.png"> <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> </div> </div>

      As I understand it, you need to swap the image and text in the second column and then make float: right for both elements.

        #totallist-left { font-weight: normal; float: left; } #totallist-right { font-weight: normal; float: right; } .totallisth { font-weight: 400; font-size: 23px; text-align: left; } .totallisthimg { float: left; height: 100px; width: 100px; margin-right: 1%; } .totallisthimg-right { float:right; } 
       <div class="container"> <div class="col col-md-6" > <img class="totallisthimg" id="totallist-left" src="http://s1.iconbird.com/ico/2013/11/504/w128h1281385326510smartphone.png"> <p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> </div> <div class="col col-md-6"> <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> <img class="totallisthimg totallisthimg-right" src="http://s1.iconbird.com/ico/2013/11/504/w128h1281385326510smartphone.png"> </div> </div>
      Although this solution will not work, if on small screens it will be necessary so that in these columns was left-sided

      • I need to make a picture as well as the left column. But that the picture was attached to the text, and the text was attached to the right side - Jengas
      • so it works now - first the text is glued to the right edge, then the picture, visually - first the picture, then the text, both pressed to the right edge (I added the totallisthimg-right class to the right picture) - Alex
      • made the code executable to see how it will be - Alex