asked on

Align 2 divs left and right if room, otherwise stack and center align?

Hi CSS Experts! I have two divs of unknown width that I want to have aligned with one on the left, and one on the right. However, if there's not enough room, I'd like them to be stacked and centered.

Here is an example:

This is to be used within an email message, needs to be done with inline styles only, and of course using no JavaScript. Can you show me how to do this? Your help with this is greatly appreciated!

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Bink

In addition to Rob's comments, which detail the real solution:

>>> I have two divs of unknown width that I want to have aligned with one on
>>> the left, and one on the right. However, if there's not enough room, I'd like
>>> them to be stacked and centered. [emphasis added]

If you don't know how wide the divs are going to be, how will you know if there's enough room for them? Even in a web page, your media query will need to target a specific breakpoint width, which you cannot calculate without knowing the widths of the divs.

lenamtl

Hi,
I would recommend using a responsive template this will adapt to the screen size
http://zurb.com/playground/responsive-email-templates

or using Bootstrap
http://getbootstrap.com/getting-started/

If you have small budget Themeforest have a great selection (use responsive filter)
http://themeforest.net/category/marketing/email-templates

Rob

I agree with what Lenamtl has said, for a website but Just be aware that for email, bootstrap, themes will NOT work as expected..

Drevo

ASKER

Thanks for your help in showing that this isn't possible within my requirements. I ended up compromising and setting DIV A and DIV B to inline-block, and then center text-aligning the parent div. Not exactly what I wanted, but as close as it seems I can get with being limited to inline styles.