CSS layout for "2 columns + em-width separator in the middle"

Question

How to get the following layout using HTML + CSS:

|                        |x|                          |
|                        |x|                          |

All three columns (two columns and separator) should be touching, i.e. their background colors have to be touching without any gaps.

The problem I have with creating such layout is that I want the "separator" to have width measured in em (i.e. font-width based), while main contents columns are to fit the rest of width of encompassing element (i.e. around 50%). I want this layout preserved, without the separator overlying left or right contents columns independently on font size (i.e. layout should be preserved if I increase or decrease font width).

Note that this layout is inside other container, and these containers can be repeated in the page. Because of this I was not able to use any absolute-positioning solution.

Also container should not use fixed width: think of it as container having width: 100%; or width: auto; (or unset width).

Bonus points if the layout can be created with either left or right column missing (i.e. empty column).

Answer 1

Using the inline-blocks you could create a lot of different non-trivial layouts.

I've made two examples, the first, with the faux equal heights: http://jsfiddle.net/kizu/nMWcG/

And the second variant, with the physical gap separator: http://jsfiddle.net/kizu/nMWcG/5/

They are somewhat different (and there could be even more layouts based on the inline-blocks that solve your problem), hope at least one of them would work for you :)

The whole idea is to use the white-space: nowrap on wrapper, so the columns won't drop if the sum of their widths is greater than wrappers' and then add a padding on a wrapper with a width: auto that would be equal to the desired gap.

If you'll need only one column, you could have one of the columns empty (without the .column-content), or remove them and have an extra class on them. Well, it depends on how you want the lonely column to behave etc.