CSS Overflow Hidden for Ads and other Boxes

Inserting an ad, or buttons, into a blog post can be tricky when a block quote overflows over, or under, the box containing the ad or buttons. Here’s how to fix this problem.

To place the ad, or buttons, in the post you’ll need to use style like the example below:

In the screenshot below you can see the Facebook button container has a gray block quote container overflowing underneath it.

To fix it we simply add the following line to the block-quote definition in our CSS (Cascading Style Sheet) for this theme:
overflow: hidden;
The example below shows the block quote is no longer overflowing into the Facebook container.

Leave a Comment