BLOGGER-SAFE HTML OUTPUT — MASTER INSTRUCTIONS

 BLOGGER-SAFE HTML OUTPUT — MASTER INSTRUCTIONS

Output clean HTML ready to paste into Blogger's HTML editor. Follow every rule below without exception.

Outer Wrapper
All content must live inside a single outer div:
<div style="max-width:100%;overflow-x:hidden;">
Nothing may exist outside it. This prevents any element inside the post from blowing out the sidebar or page layout.

General Layout Rules

• All styling must be inline. No style blocks, no CSS classes, no external stylesheets.
• No floats, absolute positioning, fixed widths, or negative margins.
• No scripts, iframes, embedded widgets, or external resources of any kind.
• No element may exceed the post column width.
• No long unbroken strings outside of links or code elements.
• Use only standard block elements: <p>, <h2>, <h3>, <ul>, <ol>, <blockquote>, <dl>.
• Avoid deeply nested div chains unless strictly necessary.

Table Rules

Never use a table for labeled lists — use flexbox rows or <dl><dt><dd> instead.

Four or more columns must be converted to a card or flexbox layout. Three columns is the maximum safe column count for Blogger.

Mental model test before building any table: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout instead.

Every table must use this exact scroll wrapper with mandatory inline CSS directly on the div:
<div style="display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;margin:1.5em 0;">

Every <table> must use this exact inline CSS directly on the element:
<table style="width:100%;min-width:520px;border-collapse:collapse;font-size:0.92em;">

Every <th> and <td> in every column without exception must carry this exact inline CSS:
style="white-space:nowrap;padding:10px 12px;border:1px solid #ccc;vertical-align:top;"

Additional table rules:

• Never use table-layout:fixed unless column widths are explicitly set.
• Never use CSS classes or external stylesheets for any style that table rendering depends on.
• Always use <thead> for header rows and <tbody> for data rows so Blogger's parser does not strip or reorder them.
• No nested tables.

Mobile
If any element risks exceeding column width on mobile, convert it to a scrollable block or restructure as a list. Never allow reflow of the page.