Position title over image - html

Question

I need to create something like the image below, without using any frameworks like bootstrap. Basically, I need the image to not be full width, but to take say 80% of the screen, and the title of the webpage to be above that image. At the moment all of my content is flowing all around the page.
It should also remain the same when I make the screen smaller.
I don't know why something simple is just not working for me...
.container {
width: 100%;
}
}
#main {
background: red;
width: 80%;
margin: 0 auto;
}
img {
max-width: 100%;
width: 80%;
float: right;
display: block;
}
<div id='main'>
<div class='container'>
<!--Image-->
<div id='img-div'>
<img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg' />
<div id='img-caption'>This is a caption for the image</div>
</img>
</div>
<!--Title-->
<div id='pagetitle'>
<h1 id='title'>Frida Kahlo</h1>
<span id='tagline'>A short Tribute</span>
</div>
<!--End Title-->
</div>
<div id='tribute-info'>
This is my main information about the person
This is a link for more information
</div>

Answer 1

I would use flex for your container, so you can swap the order and it is a more up to date way to position things than floating, then inline block for your tag lines
Please note your image tag is invalid - img tags are self closing
.container {
width: 100%;
display: flex; /* make the container flex */
flex-direction: row; /* align the children in a row */
}
#img-div {
max-width: 85%; /* 85% width */
flex-basis: 85%;
order: 2; /* put this div 2nd */
}
#image {
display: block;
width: 100%; /* make div stretch size of div */
}
#pagetitle {
box-sizing: border-box; /* make this div 15% width with a bit of padding */
padding: 20px;
max-width: 15%;
flex-basis: 15%;
order: 1; /* put this div 1st */
display: flex; /* make this flex for vertical aligning and align children in a column */
flex-direction: column;
justify-content: center; /* vcertical align center (only works with flex) */
overflow: visible; /* show overflow */
position: relative; /* make overflow appear on top of image */
z-index: 2;
}
#title {
font-size: 20px;
font-weight: normal;
}
.tag-holder {
position: relative;
}
.tagline {
display: inline-block; /* make inline block so you can add white background */
white-space: nowrap;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
background: white;
padding:0.1em 0.5em;
}
<div id='main'>
<div class='container'>
<!--Image-->
<div id='img-div'>
<img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg' />
</div>
<!--Title-->
<div id='pagetitle'>
<h1 id='title'>Emilia<br>Cole</h1>
<div class="tag-holder">
<span class='tagline'>Twist</span>
<span class='tagline'>in my</span>
<span class='tagline'>reality</span>
</div>
</div>
<!--End Title-->
</div>
<div id='tribute-info'>
This is my main information about the person
This is a link for more information
</div>
Without flex:
.container {
width: 100%;
position: relative;
}
.container:after {
content: '';
display: block;
height: 0;
clear: both;
overflow: hidden;
}
#img-div {
width: 85%;
/* 85% width */
float: right;
}
#image {
display: block;
width: 100%;
/* make div stretch size of div */
}
#pagetitle {
position:absolute; /* this is for 100% height */
top:0; bottom:0;
left:0;
right:15%;
overflow: visible;
z-index: 2;
}
.center { /* center text vertically */
position:absolute;
top:50%;
left:20px;
transform:translateY(-50%);
}
#title {
font-size: 20px;
font-weight: normal;
margin-top:0;
}
.tag-holder {
position: relative;
}
.tagline {
display: inline-block;
/* make inline block so you can add white background */
white-space: nowrap;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
background: white;
padding: 0.1em 0.5em;
}
<div id='main'>
<div class='container'>
<!--Image-->
<div id='img-div'>
<img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg' />
</div>
<!--Title-->
<div id='pagetitle'>
<div class="center">
<h1 id='title'>Emilia<br>Cole</h1>
<div class="tag-holder">
<span class='tagline'>Twist</span><br>
<span class='tagline'>in my</span><br>
<span class='tagline'>reality</span>
</div>
</div>
</div>
<!--End Title-->
</div>
<div id='tribute-info'>
This is my main information about the person
This is a link for more information
</div>

Answer 2

Try this image caption is placed on top
.container {
width: 100%;
}
}
#main {
background: red;
width: 80%;
margin: 0 auto;
}
img {
max-width: 100%;
width: 80%;
float: right;
display: block;
}
#img-caption{
position: absolute;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tribute Page</title>
</head>
<body>
<div id='main'>
<div class = 'container'>
<!--Image-->
<div id='img-div'>
<img id='image' src='https://www.projectarm.com/wp-content/uploads/2018/01/Frida-Kahlo-Vogue-1939-New-York-foto-di-Nickolas-Murray-2.jpg'/>
<div id='img-caption' class='alert alert-info'>This is a caption for the image</div>
</div>
<!--Title-->
<div id='pagetitle'>
<h1 id='title'>Frida Kahlo</h1>
<span id ='tagline'>A short Tribute</span>
</div>
<!--End Title-->
</div>
<div id ='tribute-info'>
This is my main information about the person
This is a link for more information
</div>
</div>
</body>
</html>

Answer 3

I was able to solve it simply by giving my container element a relative positioning, and my title #pagetitle element an absolute positioning, and then positioning the title top: 30px and left 30px RELATIVE to my container element. In this way, my title was positioned relative to the container, and not to the page - which would otherwise be the case had I not given the relative positioning to the container of the title.
.container {
height: 90vh;
min-height: 410px;
margin-top: 40px;
position: relative;
}
#pagetitle {
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.3em;
position: absolute;
top: 30px;
left: 30px;
}
I also gave a height to my container to make sure the content won't flow around it.
This can be easily done with CSS Grid, which is a more modern technology as well, but I preferred to stick to the traditional positioning to learn and fully understand them before skipping steps and using the easier grid system.
Whole pen and result can be seen here: https://codepen.io/commiesar/pen/GBMLza?editors=1100