CSSで、

一つのdivの中に、二つのdivがあるとき、
二つのdivの片方を310px;で指定して、
もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか?

310pxで指定したところは、内容などがはみ出さないようにしたいです。(つまり、二つの内容同士がはみ出さないようにして欲しいです。)


CSSのソースはこちらです。

div#content{
width: 100%;
}

div#1{
float: left;
}

div#2{
width: 310px;
float: right;
}

HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。

<div id=”content”>

<div id=”afl1”>

</div>

<div id=”web1”>

</div>

</div>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/01/01 14:42:27
  • 終了:--

回答(3件)

id:stnet No.1

stnet回答回数804ベストアンサー獲得回数342006/01/01 15:34:06

http://www.hatena.ne.jp/1136094147

人力検索はてな - CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか? ..

div#1{

float:left;

position:absolute;

padding-right:310px;

}


div#1を上記にすれば、WindowsのIE、Firefox、OperaではOKです

id:kabin

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

しかし、これだと

内容があふれた場合に、

よこにあふれてしまいます。

できれば、横ではなく、縦に自動的に改行されるようなものにしたいのです。

2006/01/01 17:17:16
id:izayoimizuki No.2

izayoimizuki回答回数302ベストアンサー獲得回数02006/01/01 17:37:48

CSS:

div#content{width:100%;}

div#web1{width:310px;float:right;}


HTML:

<div id=”content”>

<div id=”web1”>

test

</div>

<div id=”afl1”>

test

</div>

</div>

でしょうか。

これで左側が可変で310pxが収まらなくなれば縦に並ぶようになっています。

ただ#afl1と#web1の順番が逆転してしまいますが・・・

id:dreamily No.3

dreamily回答回数2ベストアンサー獲得回数02006/01/03 18:21:38

class属性にしてみてはいかがでしょう?


【CSSのソース】


div.content{

width: 100%;

}


div.afl1{

float: left;

width: 100%;

}


div.web2{

width: 310px;

float: right;

}


【HTMLタグ】


<div class=”content”>


<div class=”afl1”>

</div>


<div class=”web2”>

</div>


</div>

id:kabin

これらの方法がすべて、私の意図するものではなかった上に、これ以上回答があつまりそうにないので、キャンセルします。

2006/01/06 20:19:40

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません