Is there a way to align scrolling text around an image? - html

Question

I am looking to align my text with this skewed image, but the problem is the text is scrolling. Is there a way to combat this or no?
My goal is to keep the bolded "TITLE HERE" straight across the image but the placeholder text to continue to scroll, but aligning it with the large image to the left. Is this possible? Thanks for your help in advance.
/*BODY STUFF HERE*/
body {
background: WHITE;
background-attachment: fixed;
font-family: montserrat;
}
a {
text-decoration: none;
color: #999;
}
a:hover {
color: indianred;
}
.title {
font-family: montserrat;
font-weight: 900;
font-size: 6vw;
position: relative;
width: 90%;
left: 200px;
margin-top: 0%;
}
.title2 {
font-family: montserrat;
font-weight: 900;
font-size: 1.10vw;
position: static;
width: 90%;
margin-left: 45%;
}
.scrollingtext p {
width: 100%;
padding: 0 10%;
font-size: 13px;
}
/*LEFT PROFILE IMAGE HERE*/
.image {
z-index: -1;
}
.image img {
position: fixed;
width: 50%;
left: -3.5%;
z-index: -1;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
}
/*CELL TABLE STUFF*/
.tablerow {
display: table-row;
width: 100%;
}
.table {
display: table;
}
.cell {
display: table-cell;
}
.right {
width: 50%;
}
.left {
width: 40%;
}
.mobile {
display: none;
}
#media screen and (max-width: 1024px) {
.image img {
width: 100%;
position: relative;
padding: px 5% 0;
margin: 0;
top: 0;
left: 0;
}
h1 {
color: #000;
letter-spacing: normal;
width: 95%;
margin-top: 0;
padding: 0;
margin: 0;
font-size: 70PX;
text-align: center;
font-style: montserrat;
}
.title {
display: none;
}
.cell {
display: block;
}
.desktop {
display: none;
}
.mobile {
display: inherit;
text-align: center;
}
.right {
width: 80%;
margin: 0;
}
.farright {
width: 0;
}
#logo {
height: 25px;
position: absolute;
}
.story {
color: #FFF;
font-family: playfair display;
width: 100%;
height: 200px;
text-shadow: 2px 2px 5px #000;
background-color: #292929;
display: table;
}
.story_inside {
vertical-align: middle;
display: table-cell;
}
.story h2 {
font-size: 40px;
width: 60%;
padding: 0 15%;
margin: 0;
line-height: 35px;
}
.story p {
font-family: montserrat;
margin: 0;
width: 70%;
padding: 10px 15% 0 15%;
}
#media screen and (max-width: 400px) {
h1 {
color: #000;
letter-spacing: normal;
width: 95%;
margin-top: 0;
padding: 0;
margin: 0;
font-size: 40px;
text-align: center;
font-style: montserrat;
}
#media screen and (max-width: 1030px) {
.byline {
font-size: 16px;
width: 100%;
right: 451%;
float: left;
position: relative;
width: 300%;
bottom: -150px;
}
<!--IMAGE GOES HERE-->
<div class="image">
<img src="http://via.placeholder.com/350x1150">
</div>
<div class="scrollingtext">
<!--DESKTOP TITLE AND BYLINE HERE-->
<div class="title">TITLE HERE
<p>
</div>
<div class="title2"><strong>AUTHOR HERE</strong> / TITLE</div>
<!--MOBILE TITLE HERE-->
<div class="table">
<div class="tablerow">
<div class="cell left desktop"></div>
<!--DESKTOP TITLE AND BYLINE HERE-->
<div class="title">
</div>
<div class="cell farright"></div>
</div>
<div class="tablerow">
<div class="cell left desktop">
</div>
<div class="cell right">
<!-- BODY TEXT GOES BELOW HERE -->
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example.</p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. This is a set of placeholder text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
<p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder
text to show an example. </p>
</div>
</div>
</div>
</div>

Answer 1

A simple way to do it would be to make your image float with CSS in the same element as your text.
Like this example;
#my_container {
width: 400px;
text-align: justify;
}
#my_image {
width: 100px;
height: 100px;
float: right;
border: 1px solid #000;
margin: 10px;
}
<div id="my_container">
<div id="my_image">image here</div>
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
And a lot of copy and paste to fill this example.
<div>

Answer 2

Just addd this css to fix the Title
.title{font-family: montserrat;
font-weight: 900;
font-size: 6vw;
width: 90%;
position: fixed;
top: 50%;
left: 10%;}

Answer 3

Yes there is a way to do it but I dont know if your going to like the result when scrolling.
Try this;
Create some empty div that will have the width matching your image and make them float to the left so any text will bump on it.
#container{
width :400px;
height:400px;
border:1px solid #000;
}
.filler{
float:left;
clear:left;
border:1px solid #000;
height:15px;
}
#filler1{
width:200px;
}
#filler2{
width:190px;
}
#filler3{
width:180px;
}
#filler4{
width:170px;
}
#filler5{
width:160px;
}
#filler6{
width:150px;
}
#filler7{
width:140px;
}
#filler8{
width:130px;
}
<div id="container">
<div id="filler1" class="filler"></div>
<div id="filler2" class="filler"></div>
<div id="filler3" class="filler"></div>
<div id="filler4" class="filler"></div>
<div id="filler5" class="filler"></div>
<div id="filler6" class="filler"></div>
<div id="filler7" class="filler"></div>
<div id="filler8" class="filler"></div>
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
some text to copy and paste and fill the example.
</div>