<div> overflow with "float:right"

Question

I use the following line to generate a chat message from javascript:

var d = '<div class="triangle-border2 left">' + message + 
        '<span style="flex: 1 1 30px"></span><span style="float:right; font-size:80%; color:#5a8f00;margin-top:2px">' + 
         h + ':' + m + '</span></div>';

message is the message body, h is the hour and m is the minute. The div has a maximum width in its style. Here is the output for some messages:

What is the problem with the 'kkkk' and 'nnnnn' lines that makes the time overflows outside the div? Why doesn't it behave like the 'mmmmmm' line? How can I fix it?

Note: The browser is Chromium, and this is fixed.

Can you provide a minimal, complete and verifiable example? stackoverflow.com/help/mcve — Juan Ferreras
– Juan Ferreras, Commented Aug 19, 2016 at 15:17
May I suggest putting your styling into a couple of neat classes that you can apply to each appended element, rather than inject a bunch of styling for each one. It would just be a lot tidier (and would fight my hatred of inline styles). — DBS
– DBS, Commented Aug 19, 2016 at 15:17
What's the empty span for <span style="flex: 1 1 30px"></span>? — Aziz
– Aziz, Commented Aug 19, 2016 at 15:32
@JuanFerreras Well, whenever a message arrives, the value of d is appended to a panel. It is not easy to provide a minimal, complete and verifiable example, as the system is rather complex. I tried to simplify to the maximum. — AhmadWabbi
– AhmadWabbi, Commented Aug 19, 2016 at 15:39
@AhmadWabbi, I think all Juan is asking for is the output html for the bubble and the css too - so we can see what is rendered and how to fix it. To get this, you can use chrome to inspect element once it is rendered and then just copy the code — Pete
– Pete, Commented Aug 19, 2016 at 15:43

Pete · Accepted Answer · 2016-08-19 15:24:11Z

2

You are not clearing your float:

.triangle-border2:after {
    content:'';
    display:block;
    height:0;
    overflow:hidden;
    clear:right;
}

answered Aug 19, 2016 at 15:24

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Perez · Accepted Answer · 2016-08-19 15:11:37Z

1

Try giving them overflow-y: hidden;

I don't know why but that sometimes resolves my similar issues by forcing the div to expand rather than allow content to overflow

answered Aug 19, 2016 at 15:11

Joseph Perez

1183 silver badges12 bronze badges

Collectives™ on Stack Overflow

<div> overflow with "float:right"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related