CSSを書き始めて1カ月位です。

#main-left{
width:160px;
float:left;
}
#main-right{
width:640px;
float:left;
}
#foot{
width:700px;
clear:both;
text-align: center
}
で、左側の内容(#main-left)より右側の内容(#main-right)が長いと、
長い部分だけ、右側の内容が左に寄ってしまいます。
右側の内容は、長くても左側に#main-leftで指定した
”width:160px;”をあけたいのですが、どうすればいいかわかりません。
ご指導いただけると助かります。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/02/14 12:29:59
  • 終了:2011/02/21 12:30:03

ベストアンサー

id:kent0608 No.2

kent0608回答回数220ベストアンサー獲得回数232011/02/14 15:05:35

ポイント35pt

#main-right{

width:640px;

float:left;

}

全体の構造がわかりませんが、footerから推測するに、div#main-leftとdiv#main-rightを

包含しているdiv#containerのwidthは700pxなのではありませんか?

仮にそうだとすれば、160px + 640px = 800px、つまり左と右の合計値が、親の幅

700pxを超えてしまったためにカラム落ちしているのだと思います。

下記のように640pxを540pxに訂正すればぴったり収まりますよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>q.hatena.ne.jp/1297654198</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}
#container {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 30px;
	width: 700px;
	background-color: #CCC;
}
#main-left {
	float: left;
	width: 160px;
	background-color: #F2F2F2;
}
#main-right {
	float: left;
	width: 540px;
	background-color: #D9D9D9;
}
#footer {
	clear: both;
	height: 30px;
	width: 700px;
	background-color: #D4D4D4;
}
-->
</style>
</head>

<body>
	<div id="container">
		<div id="header"></div>
		<div id="main-left">
        左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT
                </div>
                <div id="main-right">
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
                </div>
                <div id="footer"></div>
	</div>
</body>

その他の回答(1件)

id:asuka645 No.1

あすか回答回数856ベストアンサー獲得回数972011/02/14 14:11:27

ポイント35pt

#main-rightがどのようなタグに割り当てているのか分からないので正確な回答はできませんが、まずは以下を試してみて下さい。

#main-right{
    width: 640px;
    float: left;
    position: absolute;
    left: 160px;
}
id:kent0608 No.2

kent0608回答回数220ベストアンサー獲得回数232011/02/14 15:05:35ここでベストアンサー

ポイント35pt

#main-right{

width:640px;

float:left;

}

全体の構造がわかりませんが、footerから推測するに、div#main-leftとdiv#main-rightを

包含しているdiv#containerのwidthは700pxなのではありませんか?

仮にそうだとすれば、160px + 640px = 800px、つまり左と右の合計値が、親の幅

700pxを超えてしまったためにカラム落ちしているのだと思います。

下記のように640pxを540pxに訂正すればぴったり収まりますよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>q.hatena.ne.jp/1297654198</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}
#container {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 30px;
	width: 700px;
	background-color: #CCC;
}
#main-left {
	float: left;
	width: 160px;
	background-color: #F2F2F2;
}
#main-right {
	float: left;
	width: 540px;
	background-color: #D9D9D9;
}
#footer {
	clear: both;
	height: 30px;
	width: 700px;
	background-color: #D4D4D4;
}
-->
</style>
</head>

<body>
	<div id="container">
		<div id="header"></div>
		<div id="main-left">
        左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT左LEFT
                </div>
                <div id="main-right">
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
        右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT右RIGHT
                </div>
                <div id="footer"></div>
	</div>
</body>
  • id:taknt
    #main-right{
    width:640px;
    float:left;

    #main-right{
    width:640px;
    float:right;
    に変えたら どうかなぁ?

    でも もともと入りきらない場合は、どういうふうにするのか
    仕様を明確にしておいたほうがいいと思うな。

    はみ出した分は どうするのか?とか。
  • id:niwa-mikiho
    #main-left と #main-right に display:block; を指定してみてください。

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

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

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

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