I have an illustration caption in the form of a <div>. It is two columns. If I add a background color to the div, it is applied to each of the columns but not to the column gap. How can I get the color to appear in the column gap as well, so that there's continuous color across the page behind the columns?

Many thanks,
Sarah Jones

If the background is being applied to the element that defines the columns, then it should cover the entire box, including the column gap. Only backgrounds on elements within the columns will not extend into the gap. For example:

<div style="background: aqua; columns: 2">
<div style="background: yellow">
...text goes here...
</div>
</div>

Here the aqua background will cover the column gap, and the yellow background will not.

I see what you mean. My problem is that my whole document (not just the captions) is in two columns. As a test I applied background: yellow to the id defining the columns for the whole document, and all the box was yellow for the document, including, as you say, the column gap. But I'm looking to apply that background effect to just a subset of the two-column whole. I've got a sneaking suspicion that would involve restructuring the document.

Yes, or making the captions span the columns, and then putting new columns inside the captions. But a small restructure would probably be easier.

Thanks so much for your help, as always. I'll have a think about how much I really want that background color!