Search code examples
htmlcssscrollword-wrap

Div Wrapping Around Scrolling Div

enter image description here

Is it possible to create this in coding? By which I mean... I see that it's possible to wrap text around a div. However, it does not seem to be working for me and I am thinking that it's because of the scrolling? Is it only possible to wrap non-scrolling text 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>

That's the code I'm trying to work with... I recognize it's not even close to being finished/perfected because I keep going back and forth trying to make it work. (I flipped the large picture to the left and will have the smaller "Notes/Tag/Outfit" text to the right so that it doesn't interrupt the scroll bar)

Solution

  • CSS

    .bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:170px 0 0;
background-repeat:no-repeat;
}

.textvalka {
width: 270px;
height:280px;
margin: auto;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding:5px;
}

    HTML

    <div class="bgvalka">
  <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>