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>
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?
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>
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.