How do I place this text on the right side

Question

I am trying to place this paragraph on the right side of my unordered list. The problem I am facing right now is that the text on the right is forced down below the li. I managed to get it on the right side but I can't manage to get it on the same "height".

The code if it helps.

 img{ height: 200px; width: 250px; border: solid green 1px; margin-top: 20px; } aside#Asid_vilkaviär{ width: 30%; float: right; margin-right: 150px; } 

 <div class="container"> <div class="argumentbild_tjänst"> <img src="miljövänlig_städning_508502626.jpg"> <ul> <li> Glöm dålig luft </li> <li> Trevligare omgivning</li> <li> Roligare vardag </li> <li> Kompetenta och välutbildade medarbetare </li> </ul> <aside id="Asid_vilkaviär"> <h1> Vilka vi är </h1> <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p> </aside> </div> </div> 

Answer 1

To keep the left part in a DIV and set its css as #leftside {float:left; width:60%} #leftside {float:left; width:60%}

  img{ height: 200px; width: 250px; border: solid green 1px; margin-top: 20px; } #leftside {float:left; width:60%} aside#Asid_vilkaviär{ width: 40%; float: right; } 

  <div class="container"> <div class="argumentbild_tjänst"> <div id="leftside"> <img src="miljövänlig_städning_508502626.jpg"> <ul> <li> Glöm dålig luft </li> <li> Trevligare omgivning</li> <li> Roligare vardag </li> <li> Kompetenta och välutbildade medarbetare </li> </ul> </div> <aside id="Asid_vilkaviär"> <h1> Vilka vi är </h1> <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p> </aside> </div> </div> 

Answer 2

There are newer/modern/new standards methods of styling like css grid and flexbox that can sort this out with the various advantages like responsiveness(good for mobile device viewing) and height. I noticed "height" meant something else in the answer you appreciated. Here is another way of doing what you wanted using grid.

 /* This here takes care of all the layout. The following child elements just fold into this. This will also give you equal height for the columns irregardless of the content either sides */ .argumentbild_tjänst { display: grid; grid-template-columns: 3fr 6fr; } img{ height: 200px; width: 250px; border: solid green 1px; margin-top: 20px; } /* There is no need to use percentages to determine size. The fr units took care of that I am using the # to color the text and background. all the layout was already taken care off */ #leftside { background: #de2; color: #000; padding: 10px; } aside#Asid_vilkaviär{ background: #a03; color: #fff; padding: 10px; } 

 <!-- Your html remains instact but could also be reduced using the modern methods. Doesnt matter anyway --> <div class="container"> <div class="argumentbild_tjänst"> <div id="leftside"> <img src="https://images.pexels.com/photos/442584/pexels-photo-442584.jpeg"> <ul> <li> Glöm dålig luft </li> <li> Trevligare omgivning</li> <li> Roligare vardag </li> <li> Kompetenta och välutbildade medarbetare </li> </ul> </div> <aside id="Asid_vilkaviär"> <h1> Vilka vi är </h1> <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p> </aside> </div> </div>