https://i.sstatic.net/53aZZ.png
Trying to figure out if I can achieve this design through coding. I've noticed that wrapping text around a div is possible, but it's not working for me. Could it be because of the scrolling? Wondering if only non-scrolling text can wrap around a div...
.bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:0px;
background-repeat:no-repeat;
}
.textbgvalka {
width:400px;
height:381px;
padding:169px 50px 50px 50px;
}
.textvalka {
width: 195px;
height:281px;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding-right:5px;
}
.picvalka {
width: 120px;
height:120px;
padding:15px;
float:left;
margin:400px 0px 0px 0px;
background: rgba(255,255,255,.7);
float:left;
}
---
<div class="bgvalka">
<div class="textbgvalka">
<div class="picvalka">
<img src="https://i.imgur.com/99V3jeX.png" width="120">
</div>
<div class="textvalka">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut viverra magna. Etiam non justo augue. Ut accumsan sapien sollicitudin turpis molestie, vel imperdiet nisl cursus. Aenean cursus magna mattis lectus efficitur, id congue mauris hendrerit. Nullam pretium turpis odio, ut tincidunt sapien porttitor sed. Integer elit elit, sagittis a libero id, pulvinar convallis eros. Aliquam ut diam fringilla, semper urna eu, fermentum mauris. Integer sapien nibh, rhoncus vitae orci interdum, interdum facilisis nulla. Sed mattis iaculis dolor sit amet condimentum. Mauris in elit turpis. Ut consequat dignissim leo vel vestibulum. Curabitur rutrum arcu elit, non maximus tellus luctus et. Pellentesque finibus fermentum pellentesque.<br><br>
Maecenas venenatis urna orci, ac eleifend eros iaculis vitae. Donec quis enim suscipit, venenatis dolor eu, feugiat ipsum. Morbi nec metus ut leo ullamcorper aliquam. Curabitur dolor magna, aliquet sit amet posuere nec, dignissim vitae orci. Aenean mattis suscipit quam. Mauris egestas pulvinar enim, pellentesque condimentum massa ullamcorper ac. Sed ac commodo nisi. Integer finibus a sem in ornare. Mauris euismod auctor convallis. Phasellus purus erat, accumsan sed mi eget, sagittis vehicula quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut rutrum dui non lorem dapibus suscipit.<br><br>
Suspendisse pharetra non ligula non luctus. Morbi bibendum ac risus ut ornare. Cras lobortis, nibh at pulvinar iaculis, orci felis ultrices felis, at rutrum odio nibh maximus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nulla eget accumsan sem. Sed mauris orci, aliquam sit amet magna nec, vulputate posuere sem. Mauris vel congue mi, sed consectetur arcu. Cras lobortis odio eu magna sagittis ullamcorper. Integer a ex tincidunt, gravida orci quis, tempus velit. Nullam convallis eleifend lacus accumsan cursus. Etiam auctor sollicitudin ligula, vel efficitur felis mollis et. Maecenas imperdiet porta nibh, sit amet viverra lorem sodales nec. Pellentesque sit amet purus semper, rutrum augue non, hendrerit purus.<br><br>
Donec laoreet fringilla dignissim. Curabitur gravida ligula dui. Aliquam lectus ligula, rutrum ut pretium ac, imperdiet ut elit. Curabitur ac volutpat odio, ac viverra enim. Aliquam erat volutpat. Suspendisse in ultrices diam. In imperdiet est non arcu porttitor, eu eleifend leo eleifend. Curabitur cursus nec augue non dapibus. Maecenas vitae odio varius nisl ultrices cursus ut sed est. Proin laoreet aliquam nibh, ut semper ante egestas a.</div>
</div>
</div>
</center>
This is the code I'm currently tinkering with, although it's far from being complete as I keep adjusting and testing it repeatedly. (I have repositioned the large image to the left and plan to place the smaller "Notes/Tag/Outfit" text on the right to avoid interfering with the scroll bar)