人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: akazu11
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox HTML TOP ファイル
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kazu1107
●27ポイント

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


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

<div id="entry">

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

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

</div>

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

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


2 ● tezcello
●27ポイント

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

URLはダミーです。

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

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

float:right;

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

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

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

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

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

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

となります。


3 ● wizemperor
●26ポイント

この例であれば高さは自動的に伸縮しますが、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/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ