HTML & CSS

Fixing an embedded Facebook box that overlaps or overflows your layout

HTML & CSS · By the Postback Notes editorial team · Published 2026-09-19

The "Like Box" that sites used to put in a sidebar was retired by Facebook in 2015 and replaced by the Page Plugin. The layout problems people had with it remain the same with any embedded widget: it is an iframe with its own width, it can stick out of a narrow column, and it can sit on top of a drop-down menu. All of them are CSS problems with CSS fixes.

Embedding the Page Plugin

Facebook's developer documentation provides a code generator. The result is a container element plus Facebook's SDK script, which replaces the container with an iframe. The relevant attributes are the page URL, the tabs to show, a width (the plugin supports roughly 180 to 500 pixels) and data-adapt-container-width="true", which makes it use the width of its parent within that range. Use the generator rather than copying attributes from old tutorials: names and limits have changed over time.

Two practical points: the plugin only adapts to its container at load time (resizing the window later does not reflow it), and it loads third-party scripts that set cookies, which may require consent under privacy laws in your visitors' countries.

Problem 1: the box sticks out of the column

A widget with a fixed minimum width wider than a mobile sidebar overflows to the right and causes a horizontal scrollbar. Constrain the wrapper:

.social-embed {
  max-width: 100%;
  overflow: hidden;          /* clip anything wider than the column */
}
.social-embed iframe {
  max-width: 100% !important; /* the SDK writes inline widths */
}

On very narrow screens, consider hiding the embed and showing a simple link instead; a 180-pixel widget in a 320-pixel screen leaves little room for content.

Problem 2: the box covers a drop-down menu

Iframes and positioned elements create layers. When a menu's fly-out appears behind the widget, the menu needs to be above it in the stacking order:

.site-header { position: relative; z-index: 100; }
.main-menu ul ul { position: absolute; z-index: 101; }
.social-embed { position: relative; z-index: 1; }

z-index only works on positioned elements (or flex and grid items), and it competes only within the same stacking context. If a parent of the menu has opacity below 1, a transform or filter, it creates a new stacking context and no z-index inside it can escape. Inspect the ancestors in the developer tools when a high z-index seems to have no effect.

Problem 3: the page jumps when the widget loads

The SDK inserts the iframe after the page has rendered, pushing content down. Reserve the space:

.social-embed { min-height: 500px; } /* match the height you configured */

Lighter alternative

A plain link with your own styling ("Follow us on Facebook") loads nothing from third parties, cannot overlap anything and respects visitors' privacy. Many sites have replaced embedded social boxes with such links for performance and consent reasons.

Related layout techniques: positioning a CSS tooltip.

References