Trying to align image on the right of text using HTML & CSS - html

Question

I am trying to align my image next to the text using HTML, so far I have tried adding float:right but it just seems to push the div down. I have also tried adding overflow:hidden but it does not seem to work.
I am using media queries to make this website responsive, and this is where I am having issues with moving the image to the right of the text,
I hope you can help.
<section id="section_about" class="grid">
<h2 class="content-title">
Our Story
</h2>
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
CSS:
.content-title {
font-family: 'Playball', sans-serif;
color: #C59D5F;
font-size: 2.5em;
padding: 5px 0;
margin-top: 10px;
}
.content-wrap p {
padding-left: 20px;
line-height: 30px;
}
.about_img{
padding: 0 10px;
}
#media(min-width: 1024px) {
.about_content {
width: 50%;
background: pink;
}
.about_img_container{
background: red;
margin: 150px;
float: right;
overflow: hidden;
}
}

Answer 1

A more modern way of doing this would be with flexbox:
HTML
<div class="flex-container">
<div class="content-wrap about_content">
<p>
Your Text here
</p>
</div>
<div class="about_img_container">
<p>sodfosdf</p>
</div>
</div>
CSS
.flex-container {
display: flex;
justify-content: space-around;
}
The justify-content property defines how the two elements are displayed next to each other or under each other.

Answer 2

First you will need to remove h2 from the section:
<h2 class="content-title">
Our Story
</h2>
<section id="section_about" class="grid">
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
Then give the section a display: flex.
#section_about {
display: flex;
flex-direction: row;
}

Answer 3

Just restrict the size of the image container by applying an appropriate width to it in your CSS rule, and move it above the DIV that contains the text so the text can float next to and under the image.

Answer 4

HTML
<div class="container">
<div class="content-wrap about_content">
<p>
Pls text here
</p>
</div>
<div class="about">
<p>Pls text here</p>
</div>
</div>
CSS
.container {
display: flex;
justify-content: space-around;
}