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:
divs-left-right.png
divs-stacked-centered.png
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!
DrevoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
This can't be done without media queries and media queries cannot be inline.

That coupled with the fact this is for email, there's no guarantee even if you were able to use media queries that it would display the way you'd like it to.

Design your email as more of a teaser, and have an online copy that you can do whatever you'd like.  keep it simple in the email or it may just look silly at the other end.

I've always used campaign monitor's css reference for email: https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf.

You can always try building it the way you want and use this preflight converter that takes all your styles and puts them inline: http://premailer.dialect.ca/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve BinkCommented:
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.
0
lenamtlCommented:
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
0
RobOwner (Aidellio)Commented:
I agree with what Lenamtl has said, for a website but Just be aware that for email, bootstrap, themes will NOT work as expected..
0
DrevoAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.