CSS: Keeping the main content div centered when the div to the right of it is Adblocked

Question

I've got two divs, the left one holds my content, the right one holds an ad. They're both set to inline-block, and they're in a wrapper div with text-align: center set to keep them centered. This way in the event that the ad div is blocked, the content div is centered correctly on its own.

The problem occurs once I use margin/padding to put a gap in between the divs. I need this so that my ad isn't 1px away from my content. But this padding is retained when the ad is blocked, which means that the main content div is shifted to the left by half this padding amount.

I've tried padding-left and margin-left in the right div, and padding-right and margin-right in the left div. It looks like adblock is setting the div width and height to 0 to hide it, so the padding remains.

All help greatly appreciated!

Answer 1

You should the margin/padding you want on the ad itself (I am guessing an img) rather than its enclosing div container. This is because AdBlock will remove the img (but not its parent div) from the DOM, taking its styles along with it.