CSS: Dynamic adjust of width depending on content

Question

This is a problem I at first didn't thought was so problematic, and perhaps it aint, but I haven't found a solution yet. I've tried a few different approaches but didn't really get the correct solution.

I've tried to show in this picture.

When the topic is short, the comment count should follow after directly.
When the topic is longer, it should be cut (hidden) and the comment count should only take up as much width as it has to.
The above should work even when the comment count is longer/shorter.

Hope this is clear enough. Thanks for any inputs!

It's doable, but it's not trivial...

Šime Vidas
– Šime Vidas

2011-01-08 19:21:44 +00:00
Commented Jan 8, 2011 at 19:21 — Šime Vidas
– Šime Vidas, Commented Jan 8, 2011 at 19:21

Šime Vidas · Accepted Answer · 2011-01-08 19:37:09Z

1

I had to use JavaScript: http://jsfiddle.net/xGWsa/

answered Jan 8, 2011 at 19:37

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

3 Comments

martnu Over a year ago

Great solution, works like a charm, only problem is js. Would be great if someone could work this out with CSS.

Šime Vidas Over a year ago

@Martin Note that you can achieve a decent effect by just having the comments on the right: jsfiddle.net/xGWsa/2

martnu Over a year ago

@Šime Yes, I though so too, but the client didn't :) I also tried a max-width approach on the left element, but that locks the comment count to a certain width, which is bad.

Collectives™ on Stack Overflow

CSS: Dynamic adjust of width depending on content

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related