How to force text to move down instead of to the side when avoiding another element WITH CSS ONLY-CodePudding

If you have a look at this screenshot, you can see that the comment's contents have positioned themselves somewhat undesirably because of the user avatar next to them. I'd like the text to stretch from side to side, what means that it should move down, instead of moving to the side, when there's another element in the way (the desired outcome).

Unfortunately, I'm unable to edit the HTML and I can only change the CSS. I have tried playing around with margins, padding and avatar dimensions, but these solutions only work for one view and break apart in another (PC -> mobile, etc.)

The HTML is structured followingly:

<div >
  <div ></div>
    <div ></div> <!--contains username and avatar-->
    <div ></div>
  <div ></div>
</div>

If there was a way to force both divs to respect their individual rectangular bounds, it would fix my problem, but I wasn't able to find anything through googling.

Apologies if I forgot to include something, this is my first stackoverflow question.

CodePudding user response：

Cannot say much without seeing the CSS, but have you tried floating the element?

Like selector { float:left; }

CodePudding user response：

So, after trying everything possible with the text and with the avatar elements, I finally figured out that I could just use overflow: auto on the div containing both the avatar and the user information. This adjusted the div's boundaries and prevented the text from flowing into the free region right below the username and date (boundaries before and after).

The simplified HTML:

<div >
  <div ></div>
    <div ></div> <!--contains username and avatar-->
    <div ></div>
  <div ></div>
</div>

The CSS:

.comment-info {
  overflow: auto;
}