https://i.sstatic.net/52mhN.jpgI am attempting to create a layout with two columns of text and a rounded image in the upper left corner of the left column. Here is what I have so far:
<div class="photoside-left">
<img class="photo" src="http://verticaltaste.digitalemotion.ie/wp-
content/uploads/2017/09/photo.jpg" alt="Laura Cosoi">
<div class="drop-cap">
<p>There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text. All the Lorem Ipsum
generators on the Internet tend to repeat predefined chunks as necessary,
making this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of model
sentence structures, to generate Lorem Ipsum which looks reasonable. The
generated Lorem Ipsum is therefore always free from repetition, injected
humour, or non-characteristic words etc. There are many variations of
passages of Lorem Ipsum available, but the majority have suffered
alteration in some form, by injected humour, or randomised words which
don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden
in the middle of text. All the Lorem Ipsum generators on the Internet
tend to repeat predefined chunks as necessary, making this the first true
generator on the Internet. It uses a dictionary of over 200 Latin words,
combined with a handful of model sentence structures, to generate Lorem
Ipsum which looks reasonable. The generated Lorem Ipsum is therefore
always free from repetition, injected humour, or non-characteristic words
etc.</p>
</div>
</div>
Here is the corresponding CSS:
@media (min-width: 1100px) {
.photoside-left {
-webkit-box-flex: 1.5;
-webkit-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
}
}
@media (min-width: 768px) {
.photoide-left {
padding: 0 40px 0 0;
margin: 0 40px 0 0;
border-right: 1px solid #e7e4d3;
}
}
.photoside-left {
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 0 40px 0;
}
@media (min-width: 1100px) {
.photo {
width: 130px;
height: 130px;
}
}
.photo {
border-radius: 50%;
line-height: 0;
border: 1px solid #e7e4d3;
background-color: #fffef7;
display: inline-block;
width: 100px;
height: 100px;
float: left;
padding: 6px;
margin: 0 20px 0 0;
shape-outside: circle();
}
.drop-cap p:first-child:first-letter {
color: #333e48;
margin: 4px 12px 0 0;
border: 1px solid #e7e4d3;
padding: 14px 15px 8px 15px;
line-height: 32px;
font-size: 52px;
font-family: "Gilroylight";
float: left;
}
@media (min-width: 800px) {
.split-columns {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid #e7e4d3; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid #e7e4d3; /* Firefox */
column-rule: 1px solid #e7e4d3;
}
The issue arises when I apply the "split-columns" class to the drop-cap div, causing the image to align with the left side of the div, which is not desired.
My goal is to position the image in the corner as if it were a single column, allowing the text to wrap around it fluidly.
Thank you for your help!