レイアウトは意外とブラウザ任せでもいいのではないか、ということもある。

MovableTypeにHTMLのデータを流し込む一方、レイアウトも悩ましい箇所が幾つかあり、先人マーカー(先にコードを書いた人)のCSSコードをコピペし、修正したものをいくつか追加。
(文章の意味合いからいってもここは文頭マークつきのliだよな。)
と考えるものの、既存のCSSには段落しがない。marginかpaddingで左からの幅を取る必要あり。当初margin-leftで指定したものの、CSSで背景に設定されている文頭マーク(background:url(〜〜) no-repeat; background-position: Npx Mpx;で位置を調整。)が出てこない。paddingで解消。背景はパディングの余白領域なら表示される。

ここまでは良かった。
ところがCSSを適用して原稿をマークアップして流し込み、表示されるとカラム落ち発生。
カラム落ちの原因は幅に絡む要素をまず疑うべき、の原則に則り、CSSを見る。

width:100%;

を発見。パディングで寄せた分+100%というのでその要素のかかっているタグの領域がフローとさせたボックスからはみ出しているのではないかと推測。%指定だから、そんなおかしなことになるはずはないとは思うのだけど。
とりあえず、この%を小さくするか、単位と数値を変えてかっちりとボックス内に収まるようにしてやらないといけない。

で、考えた。

(むしろ、要らなくね?これ。)

消した。

CSSを再適用。今度はカラム落ちせず正常に表示。

うーん……。相対要素なのに、なぁ。???