Purpose-Built Templates

ZU2B Blueprints

Business in a Box

  • Purpose-built launch kits for local service businesses — website, copy, prompts, SEO, and more.
  • Local Launch Kits →

Website Widgets

  • Working features you install once and own outright — no plugin, no subscription.
  • Chat Widget — Coming Soon

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free

When a White Gap Appears at the Bottom of a Custom HTML Section

Field Note #178
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Open DevTools and click the element showing the wrong background — identify exactly which div is responsible
2. Count “ opens vs closes inside the suspected container
3. Check for comment markers (like “) that may give false confidence a div is closed
4. Verify the actual HTML structure rather than trusting the comment

Was this helpful? Thanks for the feedback!
The symptom
After adding a white-background FAQ section wrapper to two pages, a white gap appeared at the bottom of the page between the dark CTA bar and the site footer. Multiple CSS fixes (padding, margin, overflow hidden, `wp-block-html` selector) had no effect.

Initial assumption
WordPress was adding margin to the Custom HTML block wrapper. CSS targeting the block wrapper would fix it.

Investigation
DevTools inspection revealed the `faq-section` div was highlighted as `$0` (the active element) — extending all the way to the bottom of the visible content, past the CTA bar and footer. The white background was applying to everything below the FAQ, not just the FAQ itself.
 
The real cause: an **unclosed `<div>`** inside the FAQ section. A Python div-balance check confirmed 16 opens and only 15 closes inside the `faq-section` wrapper. The section’s closing `</div><!– /faq-section –>` comment marker was there, but it came after only 15 of the 16 opens, so the section never actually closed — it kept extending through the CTA bar and footer, applying the white background to all of it.
 
Adding one missing `</div>` before the faq-section comment marker resolved it immediately.

What to check
When a background color bleeds past where it should stop:
 
1. Open DevTools and click the element showing the wrong background — identify exactly which div is responsible
2. Count `<div>` opens vs closes inside the suspected container
3. Check for comment markers (like `<!– /section-name –>`) that may give false confidence a div is closed
4. Verify the actual HTML structure rather than trusting the comment

Current finding
A missing `</div>` inside a white-background FAQ section caused it to remain open, wrapping the dark CTA bar and footer in a white container. The visual result was a white gap at the bottom of the page. CSS fixes were ineffective because the problem was structural, not styling.

Troubleshooting lesson

If a background color is bleeding into sections below where it should stop, the container div may not be closed. Count `<div>` opens vs closes inside the suspected wrapper. CSS fixes won’t help when the problem is an unclosed HTML element.

Tagged in :

More from the field