HTML CSS aligning divs and text next to image - html

Question

Hello I have read a few articles of people with similar struggles to me but none of the solutions seem to work for me.enter image description here
I am trying to create something like the picture attached but the text always seems to go underneath the image, whatever CSS I edit.
.newstitle {
background-color: #ffed00;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
display: inline-block;
}
.newspic img {
padding: 20px;
height: 300px;
vertical-align: middle;
}
<section class="main">
<div class="newspic">
<img src="https://placehold.it/500x300" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>

Answer 1

Just place the text container inside the div with the image.
<section class="">
<div class="newspic">
<img src="Art portfolio/illustrations/IMG_0844.JPG" alt="Photo placeholder">
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</div>
</section>

Answer 2

Why not try this instead:
HTML
<section class="main">
<div class="newspic">
<img src="https://images.unsplash.com/photo-1476124861542-44354851e622?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=eac3b3d003e83c809de608dd6dcc3857" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>
CSS
.main {
display: flex;
justify-content: space-between;
}
.newspic {
width: 50%;
}
.newspic img {
max-width: 100%;
}
You can view it here: https://codepen.io/jobaelish/pen/QaxXww
This is a simple fix.
Nonetheless, if you're HTML is not being affected, then you need to make sure your stylesheet is linked in your document head element properly.
<link rel="stylesheet" type="text/css" href="PATHTOCSSHERE">

Answer 3

There are "several" ways to accomplish this task. One way is to just add display inline on your side text and float the picture to the left. Also set a width on your picture. You could also use flexbox or you could of just used float with the text in the same div as the picture.
.newstitle{
background-color: #ffed00;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size: 20px;
display: inline;
}
.newspic img{
width: 300px;
float: left;
padding: 20px;
height: 300px;
vertical-align: middle;
}
<section class="main">
<div class="newspic">
<img src="https://www.google.com/logos/doodles/2018/zhou-youguangs-112th-birthday-5826412689752064-law.gif" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>

Answer 4

I removed the <div> container for the <img> and passed the class="newspic" to the image. Then I positioned both .newstitle and .newspic relatively to their parent and gave them width:70% and width:30%; respectively.
The key here, since you are using paddings is to include box-sizing:border-box; into both classes so the paddings are taken account for when calculating the width.
Here is the working code: (run the snippet & try full screen)
.main{
}
.newstitle
{
position:relative;
float:left;
width:70%;
background-color: #ffed00;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size: 16px;
box-sizing:border-box;
}
.newspic
{
position:relative;
float:left;
padding: 20px;
width:30%;
height: auto;
box-sizing:border-box;
}
<section class="main">
<img class="newspic" src="https://i2.wp.com/farm3.staticflickr.com/2883/9197736562_3cce3c65ee_o.jpg" alt="Photo placeholder" />
<div class="newstitle">
<p>D'votion presents his bassline remix of Post Malone's Rockstar</p>
</div>
</section>