CSS初心者です。

次の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の場合、レイアウトが崩れてしまうので、良い方法はないでしょうか?
よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2006/05/28 17:20:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:kazu1107 No.1

回答回数199ベストアンサー獲得回数14

ポイント27pt

このレイアウトはよくあるパターンですけど、そろえることは出来なかった気がします。(出来ても多分面倒な方法)


「見た目上」そろえたいときには

<div id="entry">

<div id="left"></div>

<div id="right"></div>

</div>

という感じでHTMLを組み、id="entry"のbackground-imageなどを設定し、あたかも"left"と"rigth"がそろってるように見せる方法がよく使われます。

http://www.yahoo.co.jp/

id:tezcello No.2

回答回数460ベストアンサー獲得回数69

ポイント27pt

http://q.hatena.ne.jp/1148199319

URLはダミーです。

よく見かける左右2ペインの表示にしたいという事だと思います。

Netscape等でチャンと見るためには、右側のになる方のフロート配置

float:right;

を削除してみてください。

左用にfloat:left; 、右用にfloat:right; 両方を記述すると記述するとNGになるみたいです。

今回のhtmlでは先に左用の記述があるのでその部分は左に配置し、続く部分は残っている所(つまり右側)に配置する。

というように構成すればいい訳です。

SEOを考えて、右側に来る部分を先に記述したい場合は、

右側用のIDにfloat:right; を記述して左用には何も記述しない。

となります。

id:wizemperor No.3

回答回数379ベストアンサー獲得回数52

ポイント26pt

この例であれば高さは自動的に伸縮しますが、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まで伸び、かつ左右がきっちり分かれているように見えるようになります。

http://yahoo.co.jp/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません