How to stop content from overflowing in floated boxes?

[jss0]

Hello!

I am trying to build a comment section box in HTML and CSS. For that, I am using a floated thumbnail of the user. And I have set the overflow property to hidden so that the comment text clears the thumbnail image horizontally.

The problem is, the comment text overflows out of the box. I need a fix so that the user can scroll through the comment instead of it overflowing and making it look messy.

Please excuse me for my inaccurate and incomplete description as I’ve just started with HTML and CSS.

<div class='footer'>
      <div class="column">
        <div class='avatar'></div>
        <h3 class='username'>Bob Smith</h3>
        <p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat
        ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque
        purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
      </div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>

.avatar {
  border: 1px solid red;
  float: left;
  width: 60px;
  height: 60px;
  margin: 25px;
  border-radius: 50%;
  background-color: #d6e9fe;
}

.username {
  border: 1px solid green;
  margin-top: 30px;
}

.comment {
  border: 1px solid blue;
  margin: 10px;
  overflow: hidden;
}

Here is the screenshot of my page.

Again, I know I haven’t stated my problem clearly but please bear with me. Thank you.

[marcia.247]

I’m not getting overflow like in the screenshot when I try out your code. Can you please post the entire html file? Thanks!

[jss0]

Oh, sure I can. Even I am unable to notice any anomalies in my code but the browser rendition tells a different story.

I am uploading both HTML and CSS files here. Please have a look. Thank you.

floats.txt (1.9 KB) styles.txt (1.3 KB)

P.S. I have renamed the file extension to .txt as HTML and CSS files cannot be uploaded.

[mtf]

      <div class="column">
        <div class='avatar'></div>
        <h3 class='username'>Bob Smith</h3>
        <p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat
        ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque
        purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
      </div>

One way around this is to give username and comment a wrapper div.

    <div class='avatar'></div>
    <div class="user-comment">
        <h3 class='username'>Bob Smith</h3>
        <p class='comment'></p>
    </div>

Give that div a float property as well as width: auto

[jss0]

As I’ve said earlier I want to hide those comments from overflowing out of the box (maybe add a scroll bar if the comments get too long).

I tried doing as you suggested. But you might wanna take a look at the result. Both the comment and username fall below the actual comment box.

Thanks for the help.

P.S: Doing something like this is pretty simple using flexbox. But are these kinds of problems actually very tricky to to solve with floats? And should I avoid using it too often?

[mtf]

But are these kinds of problems actually very tricky to to solve with floats?

Yes, floats are tricky to contain, and often need more structure and tweaking. It’s been ages since I explored them so am starting from scratch, again.

I did get this to work, without adding any more floats, just by controling the margins and heights. The heading and the comment need to be in a container, and oddly, the only property I gave the container is overflow:hidden.

      <div class="column">
        <div class='avatar'></div>
<div class="user-comment">
        <h3 class='username'>Bob Smith</h3>
        <p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat
        ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque
        purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
</div>
      </div>

.avatar {
  border: 1px solid red;
  float: left;
  width: 60px;
  height: 60px;
  margin-top: 25px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: #d6e9fe;
}
.username {
  margin: 10px;
  border: 1px solid green;
}
.comment {
  border: 1px solid blue;
  margin: 10px;
  height: 110px;
  max-height: 110px;
  overflow: hidden;
}
.user-comment {
  overflow: hidden;
}

[jss0]

Aha! This solves the problem. Thanks for taking the time out for this.

I’ve been reading some articles over floats and find that flexbox and grid have taken over floats for most of the purposes and floats have become kind of obsolete (except for few edge cases and legacy browser support).

I think floats are a hacky and inelegant way to build grids or any layout for that matter. So I guess I’ll have to avoid it as well.

And thanks again.