Jump to content

Need to get two blocks of text side-by-side that change in width


Recommended Posts

Refer to this: http://jsfiddle.net/3Yg6X/2/

 

Based on that jsfiddle, I want to get the blue square to the right of the red square.

 

The text in the red square may vary in width, so the blue squares width will have to adapt to a wider red square without dropping below it like it is here.

I guess to ensure it doesnt drop down you need to be sure that the some width of both boxes will not exceed the container.

max-width would go someway towards this but only if you split that 50/50 for the 2 boxes. this would not really be a satisfactory resolve.

I fear some sort of javascript trickery might be the only option, or perhaps turn it into a list with floated list items?

That's not a problem, the red square will never get that big. The red square will have a username and some other stuff so at most it will be like 30 characters. I'm just working with limited space so I don't want it to be that wide if it doesn't have to be.

 

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.