Positioning content inside DIV - html

Question

I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.

Answer 1

There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.

Answer 2

A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>