はなまるスキン：デモ

自分でサイトを作る時に、やはり必要な事の一つとして各ブロックの配置や位置の調整があります。私が位置の調整をする時は、編集用のスタイルシートを利用します。

hnmGreen/color.css　の上部にあるコメントアウトを外します。
body {background-image:url('http://hanamachi.com/image/hogan.gif');}
div#body {background-color:transparent;}

管理画面 >> スキン編集 >> hnmgreen >> メインの目次ページ（個別アイテムページ）をクリックし、下の一行を両方のスキンとも“color.css”を読み込む前に読み込ませます。こんな感じになります。
<link rel="stylesheet" type="text/css" href="<%skinfile(color.css)%>" />
<link rel="stylesheet" type="text/css" href="<%skinfile(haici.css)%>" />

そこで、画面をかくにんすると、背景にグリッドが表示されて、エリア毎にドットで区切られている状態になっていると思います。

この状態であれば、サイズの変更や、フロートの幅の調整などがわかりやすいかと思います。ただ、罫線分2pxずれますので，注意して下さい。