How to have a DIV that expands in length based on content?

HTML & CSS
1

Hi,

What is the CSS to have a DIV expand in length to fit the content put into it?

This DIV is going to contain the messages typed in by people, so the length of the DIV is to change based on length of message posted. FYI, we need this for a Node.js based Web chat we are creating.
You can see the simple sample of the chat room under dev here:
www.sitesticky.com

So go ahead and type a short message and you will see it will display good.
But type in a long message and it breaks out of the DIV that is to contain it!
We have tried setting the length to auto 100% etc. and non worked.

Thanks,

2

Of course in all of the above question I meant to say height and not length!
Sorry, doing 10 peoples Job does that to your brain/eye :slight_smile:

3

The default height value of a div is auto, so it will expand its height to accommodate content without having to add any css at all.

1 Like
4

I don’t see that. All I get is that the text scrolls to the left, which I would expect with a text box.

Edit: Ah - I was supposed to press Send!

5

Looking at the actual site, you have absolute positioning on the div which takes it out of the flow, remove that and it will be back in the flow and expand to take content.

2 Likes
6

Sam,

Your suggestion does work to the extent that now the text message is all fit within the user chat message bubble (DIV).
But the reason we had the absolute positioning there was to keep the Text message to not wrap under the Avatar image of the user. So having removed the absolute positioning now long messages are wrapping under the Avatar image rather wrap nicely under the text message only which is what we want.
What suggestions do you have to achieve both results?

Thanks,

7

Try this:

.avatar_place{float:left}
.text_place{overflow:hidden;display:block;}
8

Paul,

That is worse. Now the chat messages are under the Avatar image.

Also please keep in mind that the Chat room owner, their chat message (Text + Avatar) display on the right side of the screen. Visitors chat message (Text + Avatar) display on the left side. Hence we have:

avatar_place & text_place for visitors
&
avatar_place_owner & text_place_owner for the member (who owns this chat room) and invited people to chat

Thanks

9

No, This is how it looks with my code.

790×459 62.8 KB

You corrupted my code when you added the margin next to the float.

I’m just going on what I see. You’ll have to show screenshots of what you mean?

2 Likes
10

Hey, your code reduced works just fine! Cool.
When the messages are by visitors on the left side.
But when the chat messages are by the owner of the room, which means on the right side, it is not working as the Avatar image follows out the chat message bubble!
You can see it here in this sample chat room:

http://www.sitesticky.com/?mem=99

Thanks,

11

That’s a different structure from the other one and would have worked had you had the avatar image as the first element rather than the last.

If you don;t want to change the html then you will need to absolutely place the avatar into position for that right hand chatbox.

e.g.

.text_place_owner{padding-right:40px;}
.avatar_place_owner{
    float:none;
    position:absolute;
    right:10px;
    top:10px;
}

1213×569 29.9 KB

12

This works perfectly.
Man you are some CSS God dude :slight_smile:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.