Independent widths?

[Weremuffin]

Not sure if this is the right term.
I’m working on a project that has a chat feature.

What my desired result is that each message has a minimal width of 125px and a max of 350px.
So whatever the message is will cause it to resize from anywhere in between.
If it’s short, it’d just be 125px. If it’s really long it’d be 350px. So Yeah.

Anyway. It does work just fine, But for some reason the message with the largest width will get applied to all other messages.
This is not desired.

I have tried everything I know of to get it to behave with only one result, But that result doesn’t work with the way the chat is done.

I set up an example page here.
It includes only the most important pieces.

I’m honestly quite annoyed at it, So that’s why I’m asking for help here.
Hopefully someone knows a way to get it to behave.

I swear it’s going to be something completely obvious that I reaaally should of noticed..
Anyway, Whomever can get it to behave will definitely get a spot on the credits page.

.. *blinks* I hope this is the right place for asking.

[jonS7]

Try using paragraphs instead of divs for the author and content. The divs will just try to stretch out to the max width available.

[doobie]

You might try using some jQuery for this. As it’s more of a progressive-enhancement that the design doesn’t depend upon, you can get away with it.

You’ll detect the length of the post, then set a class to that div, specifically, that has an explicit width set. Then set the ‘normal/standard’ message div width to whatever, 150px.

Hope that makes a bit of sense.

-Jacob

[Author]

Posts