Question

Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?

EDIT: Accepted the answer a little early before I actually tried. Whoops.

JSFiddles:

A Tale of Two Divs

Now separated, but now with the second one on a second line?

Answer 1

I believe your selected answer will not work:

http://jsfiddle.net/cNsXh/

edit:
Sorry, the above example was not correct at first. Now it is.
/edit

As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we’re mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.

You’ll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:

http://jsfiddle.net/k7LRz/

This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3’s box-model will provide more flexible options here. But, admittedly, I’m not sure yet about cross-browser support for these new features.