how can send my text to the right with css? - html

Question

I want to send my text to the right as the images below , but however when I want to send it. it doesnt work can I fix it? my html looks like this . if someone can help me with this i will appreciate
Here is HTML structure and CSS:
div#mapdiv2 {
width: 512px;
}
div#map {
width: 512px;
}
div#panodiv {
float: left;
width: 50%;
}
div#panodiv2 {
width: 512px;
}
div#mapdiv2 h2,
div#map h2,
div#panodiv2 h2,
div#pano h2 {
font-size: 15px;
}
div#mapdiv2 p,
div#map p,
div#panodiv2 p,
div#pano p {
font-size: 11px;
}
div#pano {
width: 512px;
}
div#mapdiv2 img,
div#map img,
div#panodiv2 img,
div#pano img {
width: 10%;
}
<div class="content_feactures">
<h1>Feacture</h1>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p>
<div class="wrap_feactures">
<div class="wrap_feactures_content">
<div id="mapdiv">
<div id="mapdiv2">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
<div id="map">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
<div id="panodiv">
<div id="panodiv2">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
<div id="pano">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
</div>
</div>
</div>
Here is what i try to achieve

Answer 1

Your h2 and p are by default display: block, which means it will take 100% width of their parent.
Easiest solution is to wrap h2 and p in div with a class, and asign flex to their parents:
<div id="pano">
<img src="img/check.png">
<div class="wrapper">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
then CSS:
#pano {
display: flex;
width: 50%;
justify-content: center;
align-content: center;
text-align: left;
}
#pano img {
width: 100px; //Or what ever you want
}
#pano .wrapper {
flex: 1;
}
Repeat with other divs.

Answer 2

You can add display:inline-block; ti the <img> CSS and also try something like this:
<div id="mapdiv2">
<img src="img/check.png">
<div class="special">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
and
.special{
width: 80%;
display:inline-block;
}
Play around with the widths and margins until you get the result you want

Answer 3

My advice is to rap the text in a div or give both a class
<div id="map">
<img src="img/check.png">
<div class="text"
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
css
div#map img {
width: 10%;
float: left;
}
div#map .text {
width: 90%; /*or any width*/
float: rigth;
}
Use floats to direct them to where you want them to saty
This should work