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

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;”をあけたいのですが、どうすればいいかわかりません。
ご指導いただけると助かります。


●質問者: idek
●カテゴリ:ウェブ制作
✍キーワード:CSS 部分
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● あすか
●35ポイント

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

#main-right{
 width: 640px;
 float: left;
 position: absolute;
 left: 160px;
}

2 ● kent0608
●35ポイント ベストアンサー

#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>
関連質問


●質問をもっと探す●



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