CSS モニタサイズで表示差異

質問

http://milknext.com/index.aspx　　左記サイトにおいて

CSS　のブラウザによる差異ではなくモニタ（解像度）に

よる差異が出て解消商法を探しております。

【正常】
１７インチデスクトップ（１２８０×１０２４）
１９インチデスクトップ（１２８０×１０２４）

【ずれる】
１５．３インチノート（１３６６×７６８）
１５インチデスクトップ（１０２４×７６８）
１４．４インチノート（上記より小）
１４インチノート（上記より小）

この様な状態で「大きなモニタ（高解像度）になるほど」

正常なのはわかるのですが、困っております。

最小のモニタでも横幅は収まっており

何が問題なのか？詰まっております。

お知恵をご教授頂ければ嬉しく思います。

回答No.1

ORUKA1951 · ベストアンサー

デザイン感覚はすばらしいですね。
リキッドデザインにするときは、基本は巾に関しては、親コンテナブロックに対する%で指定するほうが無難です。
HTMLが
<div class="header">
　内容はページのヘッダ(この文書の内容の要約)
</div>
<div class="section">
　<div class="main">本文(一分でわかる・・以下)
　</div>
　<div class="form">
　　申請部分
　</div>
</div>
<div class="footer2>
　文書情報
　「MILKNEXTは全国の牛乳販売店さんに先進のITを活用したシステムを提供します。」
　<div class="nav">
　　問合せや、ナビゲーション
　</div>
</div>
とマークアップされているとして
div.header,div.section,div.footer{
width:80%;min-width:640px;margin:0 auto;max-width:800px;
}
div.header{margin-top:100px;}
div.footer div.nav{position:absolute;top:0;height:100px;}
/* ここから */
div.section{
position:relative;
div.section div.main{
margin-right:30%;
}
div.section div.form{
width:29%;
position:absolute;
right:0;
top:0;
height:100%;
}
/* ここまで */

これで、最小640pxから最大800pxまで記事は中央配置され、formも常に右に表示されるはずです。
ポイントは、親コンテナブロックをrelativeにして、それを基準に中身をabsolute配置すると常に、親コンテナブロックのサイズと位置に合わせて配置できます。