次のCSSファイルとhtmlファイルにおいて
<css部分>
#wrapper{
width:750px;
}
#top{
width:750px;
height:90px;
}
#Lside{
width:120px;
float:left;
}
#Rside{
width:630px;
float:right;
}
#bottom{
width:750px;
height:90px;
clear:both;
}
<html部分>
<body>
<div id="wrapper">
<div id="top">
</div>
<div id="Lside">
</div>
<div id="Rside">
</div>
<div id="bottom">
</div>
</div>
</body>
<Rside>と<Lside>の高さを同じに保ちたいのですが、どうすればよろしいでしょうか?
高さを指定してしまうと、firefoxの場合、レイアウトが崩れてしまうので、良い方法はないでしょうか?
よろしくお願いします。
このレイアウトはよくあるパターンですけど、そろえることは出来なかった気がします。(出来ても多分面倒な方法)
「見た目上」そろえたいときには
<div id="entry">
<div id="left"></div>
<div id="right"></div>
</div>
という感じでHTMLを組み、id="entry"のbackground-imageなどを設定し、あたかも"left"と"rigth"がそろってるように見せる方法がよく使われます。
http://q.hatena.ne.jp/1148199319
URLはダミーです。
よく見かける左右2ペインの表示にしたいという事だと思います。
Netscape等でチャンと見るためには、右側のになる方のフロート配置
float:right;
を削除してみてください。
左用にfloat:left; 、右用にfloat:right; 両方を記述すると記述するとNGになるみたいです。
今回のhtmlでは先に左用の記述があるのでその部分は左に配置し、続く部分は残っている所(つまり右側)に配置する。
というように構成すればいい訳です。
SEOを考えて、右側に来る部分を先に記述したい場合は、
右側用のIDにfloat:right; を記述して左用には何も記述しない。
となります。
この例であれば高さは自動的に伸縮しますが、LsideとRsideに区切り(色やボーダー)をつけた場合のことでしょうか?
それであれば、LsideとRsideをdiv要素で囲み、このdiv要素に背景画像を指定するのが一般的で最も簡単な方法だとおもいます。
CSS
#top{
width:750px;
height:90px;
}
#wrapper{
width:750px;
background-image: url(bg.gif);
background-position: left top;
background-repeat: repeat-y;
}
#Lside{
width:120px;
float:left;
}
#Rside{
width:630px;
float:right;
}
#bottom{
width:750px;
height:90px;
clear:both;
}
HTML
<div id="top">
topの内容
</div>
<div id="wrapper">
<div id="Lside">
Lsideの内容
</div>
<div id="Rside">
Rsideの内容
</div>
</div>
<div id="bottom">
bottomの内容
</div>
(うまく表示できないようなので、ここでは<, >を全角にしています。実際には半角で書いてください。)
background-image: url(bg.gif);
background-position: left top;
background-repeat: repeat-y;
というようにLsideとRsideの親要素に背景画像を縦にくり返して表示します。
bg.gifは120px(Lsideの幅)と630px(Rsideの幅)で区切られた下記のような横幅計750pxの画像を用意します。
+--------+--- 750px --------------+
|...........|...............................|
|...........|...............................|
|.120px.|.............630px..........|
|...........|...............................|
|...........|...............................|
+--------+------------------------+
これで見た目上はLsideとRsideがbottomまで伸び、かつ左右がきっちり分かれているように見えるようになります。
コメント(0件)