CSS 左右違う大きさのボックスでheightを合わせたい

質問

外部CSSでHPを作成しています。
基本的なことかと思いますが、調べてもどうしてもうまくいかないので
皆さまのお力をお貸しください。

左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。
それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。
固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。
どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？
また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？
どうぞご教授ください。
よろしくお願い致します。

/*CSSファイルの記述*/
.waku1{
border : solid 1px #999999;
border-bottom: none;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}

.waku2{
border : solid 1px #999999;
border-left: none;
border-bottom: none;
width :335px;
line-height: 160%;
word-break: break-all;
}

.waku3{
border : none;
border-bottom: solid #999999 1px;
border-top: solid #999999 1px;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}

.waku4{
border : none;
border-bottom: solid #999999 1px;
border-top: solid #999999 1px;
border-left: none;
border-bottom: none;
width :335px;
line-height: 160%;
word-break: break-all;
}

.clear{
clear : left;
}

/*HTMLファイルの記述*/

<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku3"></div>
<div class="waku4"></div>
<div class="clear"></div>

回答No.6

leap_day · ベストアンサー

こんにちは

16pxということは1行分のスペースですね

<div class="clear">↓</div>

<div class="clear"></div>↓

他の</div>↓<div>の間

矢印の部分に全角スペースが入っていませんか？
もしくは<div class="clear">&nbsp;</div>にしているとか？

それ以外だとちょっと分からないので新規で質問してもらえますか？
コピペして作ってるならここのアドレスを貼り付けて
改変してるならご自身のソースをつけて
作成しているエディタ(ホームページビルダーとかNotePadとか）
利用ブラウザ（IE6とか）を添えて・・・
僕も理由が知りたいですので（＾＾）

お礼

何度もご回答ありがとうございます！

確認しましたがスペースはどこにも入っていないようでした。
leap_dayさんのアドバイス通り、新規で質問してみます。
まだ隙間の問題はありますが、ここまで来れたのもleap_dayさんのおかげです。
本当に色々とありがとうございました＾＾

回答No.5

leap_day

こんにちは

サイトからprototype.js (1.6.0)をダウンロード(1.5.0　1.5.1でもバージョンが違うだけでほぼ同じです)

┣html(フォルダ)━test.html
┣css(フォルダ)━test.css
┗prototype.js

【test.css】
.waku1{
border : 1px solid #999999;
border-bottom: none;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}

.waku2{
border : 1px solid #999999;
border-left: none;
border-bottom: none;
width :335px;
float : left;
line-height: 160%;
word-break: break-all;
}

.waku3{
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}

.waku4{
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
width :335px;
float : left;
line-height: 160%;
word-break: break-all;
}

.clear{
clear : left;
}

【test.html】
<link rel="stylesheet" href="../css/test.css" type="text/css">
<script type="text/javascript" src="../prototype.js"></script>

<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] -1 + "px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] -1 + "px"; }
}
}
//--></script>

<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1">&nbsp;</div>
<div class="clear"></div>
<div class="waku1" id="w2">&nbsp;</div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4">&nbsp;</div>
<div class="waku2" id="w5">antidisestablishmentarianism antidisestablishmentarianism</div>
<div class="clear"></div>
<div class="waku3" id="w6">&nbsp;</div>
<div class="waku4" id="w7">&nbsp;</div>
<div class="clear"></div>

で試してもらえますか？

＞1px
floatしたものとそうでないものの間に出来る消せない(?)隙間です
またFirefoxやOperaではそうでないものがfloatの下に入り込んでwaku2、waku4のwidthが違うものになるみたいです
.waku2　.waku4にもfloat:left;を入れて下さい

＞function内の『-1』
border分高さ取得のときに余分に足されてるみたいですので追加しました

＞word-break: break-all;
これはIE専用なので一応注意してください
Firefox,Operaでは枠をはみ出して表示されるか手前で改行されます
id="w5"で長い単語を入れていますが
IEでは『antidisestablishment』で改行されますが
Firefox,Operaでは単語を1回ずつ2行で表示されます(→右に100pxほどの隙間が出来る）

＞javascript使用の設定
javascriptの使用は許可していますか？
隙間が出るということはIEだと思うので
『ツール』『インターネットオプション』
『セキュリティ(タブ)』『レベルのカスタマイズ(ボタン)』
『スクリプト』『アクティブスクリプト』『有効にする』のラジオボタンはチェックされていますか？

お礼

ご回答ありがとうございます！

教えていただいたように、
test.cssとtest.htmlを作成して確認しました。
ものすごく近づいたようで、それぞれ左右の高さが合ってきました。
が、w1・w2とw3・w4などの上下に16pxの隙間ができてしまいました。
（キャプチャーをとってはかったのですが…）
それ以外は問題なさそうです。
左右の隙間もちゃんと埋まっていました。

この上下の隙間をどのようにしたらなくせますか？
どうかご教授ください。
よろしくお願いいたします。

回答No.4

leap_day

こんにちは

色々やってみたのですがちょっと分かりかねますね・・・
<div class="clear"></div>があるのでid="w3"はid="w1"の下に配置されるはずなのですが・・・

[cgi-binなどのフォルダ]
　┣htmlファイル
　┣CSSファイル
　┗prototype.js
になっていますよね？

外部CSSファイルのようなので以下の<link rel>の『href="●●.css』のみその外部CSSファイルの名前に変えて<body>内にコピペして試してみてもらえますか？（正規には<lin rel　～　//></script>　は<head>内に入れるようになりますが<body>内に入れても機能はしますので）
※外部CSSファイルの中身は質問のものだけになってます

IE6,Firefox2,Opera9でいつも試しているのですが表示されてたのですが（－－；）

<link rel="stylesheet" href="./●●.css" type="text/css">
<script type="text/javascript" src="./prototype.js"></script>

<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] +"px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] + "px"; }
}
}
//--></script>

<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1">&nbsp;</div>
<div class="clear"></div>
<div class="waku1" id="w2">&nbsp;</div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4">&nbsp;</div>
<div class="waku2" id="w5">&nbsp;</div>
<div class="clear"></div>
<div class="waku3" id="w6">&nbsp;</div>
<div class="waku4" id="w7">&nbsp;</div>
<div class="clear"></div>

お礼

ご回答ありがとうございます。
お礼が遅くなり申し訳ありません。

教えていただいたコードを埋め込んだところ、今度は少し近づいたようです。
ファイルはフォルダごとに分けて格納してあり、

├index.html
├htmlフォルダ
├imagesフォルダ
├cssフォルダ
└prototype.js

となっています。

<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>　←ここと
<div class="waku2" id="w1">&nbsp;</div>　←ここはすっきりきれいにできましたが、w2の枠線が下まできません
<div class="kaijo"></div>
<div class="waku1" id="w2">&nbsp;</div>　←ここは右エリアの分heigthが伸びず、1行分のままです
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>　←ここはきれいに3行分伸び、枠線も問題なく表示されました
<div class="kaijo"></div>
<div class="waku1" id="w4">&nbsp;</div>　←ここと
<div class="waku2" id="w5">&nbsp;</div>　←ここはきれいに表示されていますが、左エリアと右エリアの間に1px程度の隙間があります。
<div class="kaijo"></div>
<div class="waku3" id="w6">&nbsp;</div>　←同上
<div class="waku4" id="w7">&nbsp;</div>　←同上
<div class="kaijo"></div>

タイトルにしようと思っている左エリアには薄く背景色をつけているのですが、
w2は1行分しか色が着いていなく、また枠線も伸びていません。

上記が今現在の状況なのですが、ほかにどこを直せば良いでしょうか？
何度も申し訳ないのですが教えていただけるとうれしいです。
よろしくお願い致します。

回答No.3

grumpy_the_dwarf

> Aはタイトル、Bに文言と言う感じです。
> 理想はBに入れた文言の列分、Aのタイトルheightも伸びる

そりゃぁ、定義つきリスト(DL)でしょう。
DTの幅を指定して、それプラス間隔分をDDのleft-marginにする。それだけだ
と行がずれてるので、DDをrelativeで1em上に持ち上げる。でなけりゃ、float
させといてDDの後ろでclearする。

そんな感じで出来ますよ。論理的もAとBがきちんと対応して、一番読みやすい
はず。

お礼

ご回答ありがとうございます。

DLタグを使ったことがなく先ほど調べたのですが、
（http://www.tagindex.com/html_tag/list/dl.html）
細かい指定の方法が分かりません…。

こちらのサイトを見るとなんとなくできそうな気もするのですが、
（http://www.stylish-style.com/csstec/hi-level/dl-photo.html）
>DDをrelativeで1em上に持ち上げる
がよく分かりません…。

もう少し詳しく教えていただけるとうれしいです。
よろしくお願い致します。

回答No.2

leap_day

こんにちは

＞テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？
こちらの方はちょっと答えられませんが・・・（－－；）

prototype.jsというのをダウンロードして（Archivesのところのを右クリックで『ファイルに保存』、htmlと同じフォルダに保存します）
http://www.prototypejs.org/download

【<style>～</style>は省略してます。付け加えてください】
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] +"px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] + "px"; }
}
}
//--></script>

<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1">&nbsp;</div>
<div class="clear"></div>
<div class="waku1" id="w2">&nbsp;</div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4">&nbsp;</div>
<div class="waku2" id="w5">&nbsp;</div>
<div class="clear"></div>
<div class="waku3" id="w6">&nbsp;</div>
<div class="waku4" id="w7">&nbsp;</div>
<div class="clear"></div>

のようにすればできると思います

<div>の数が増えれば『id="w●』を追加していって
for(i=0;i<8;i++) をその個数に変更(8の部分)
for(i=0;i<4;i++)　を個数の半分に変更(4の部分)していけばいいと思います

お礼

ご回答ありがとうございます！
教えていただいたサイトからダウンロード・保存し、
<script language="JavaScript"></script>の間に書き込みました。

そしてその下にありました
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
から
<div class="clear"></div>をペーストしてみたのですが、

<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>　←ここはちゃんと2行の高さになりました。
<div class="waku2" id="w1">&nbsp;</div>←ここは最初のwaku1の横に1行分の高さにくっつきました
<div class="clear"></div>
<div class="waku1" id="w2">&nbsp;</div>←ここは最初のwaku1の横・waku2の下にくっつきました。（入り込んだ、という感じです）
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>←ここはwaku1の下に表示されたのですが、なぜか幅も広がっています。
<div class="clear"></div>
<div class="waku1" id="w4">&nbsp;</div>←ここ以降は何も入っていないせいか、きれいに表示されています。
<div class="waku2" id="w5">&nbsp;</div>
<div class="clear"></div>
<div class="waku3" id="w6">&nbsp;</div>
<div class="waku4" id="w7">&nbsp;</div>
<div class="clear"></div>

このように表が崩れているように見えるのはどうしてですか？
申し訳ないのですが、もう一度教えてください。

お返事が少し遅くなるかもしれませんが、
必ずお礼いたしますので、よろしくお願い致します。

回答No.1

noname#39970

縦に沢山。横は2つ
縦方向に見た時に1段ずつで左右を合わせたい
というなら
それの用途的には「表」になっているのではないだろうか。

表、それを実現する最も正しい方法は「table」タグを使う事。

因みに固定サイズでないのなら自動調整はjavascriptでも使わない限りは 今のところやりようが無いと思うよ。

お礼

そうです、そうです！
excelの表のようなものを作っています。
AとBを使って15行程度の表です。
Aはタイトル、Bに文言と言う感じです。
理想はBに入れた文言の列分、Aのタイトルheightも伸びる、です。

tableを使ってやっていたのですが、
文言を入れるとほかが崩れてしまうところがあって、
（作り方が悪いのかな…）
できればCSSですっきり作りたいなと思って質問させていただきました。

CSSで難しいようでしたらtableに戻してみます。
ご回答ありがとうございました！