MB-Support

パソコン初心者のサポートページ

 カテゴリ:
 

3.スタイルシート:横2段表示



 2009 年 3 月 21 日 (

3.スタイルシート:横2段表示

前回の続きです。Float(フロート)でleft、rightを指定して、サンプルの文章を横2段表示してみました。今度は、どちらかのDIVの幅を固定したいと考えます。例えば、横幅100%を維持しつつ、メニューが表示されるDIVは横幅160pxを維持して、ブラウザサイズを変更した時にコンテンツのDIVだけ広げたり縮めたりできれば便利です。



カテゴリ : ホームページの作り方 / スタイルシート CSS


投稿パネルを開く

[ コメント数 1件 ] 表示の切り替え : [ 昇順 ] [ 昇順 ]


投稿NO:[4070] → Re:[この日記へのレス]

IE7以降はmax-widthとmin-widthが利用可能。

max-width:160px;
min-width:160px;

div#container {
width:100%;
}
div#content {
width:70%;
min-width:500px;
float:left;
}
div#menu {
width:30%;
max-width:160px;
min-width:160px;
float:right;
background-color:red;
}

width:30%;をFloatのために指定しても、max-width:160px;を指定すれば、横幅160pxを維持。さらに、min-width:160px;を指定すれば、常に横幅160pxを維持しつつ、コンテンツ幅を70%で可変できます。コンテンツにもmin-width:500px;を指定すれば、500px以下に縮まる事を防げます。いずれも、最小値よりブラウザサイズを縮めた場合、回り込みは解除されます。


このコメントは管理人より投稿されました投稿者 : 管理人
投稿日 : 2009 年 03 月 22 日 - 13 時 05 分 28 秒

[ コメント数 1件 ] 表示の切り替え : [ 昇順 ] [ 昇順 ]