Trying to add floating image and and description in a filled box - html

Question

I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?

Answer 1

Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/