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

cssでレイアウトしようとしいているのですが、うまくいきません。 ads エリアがコンテナの右側に来て欲しいのですが、IEでは単に右に行くだけになっています。 よろしくお願いします(__)

〜省略〜
<style type=”text/css”>
<!--
div
{
margin: 0px;
padding: 0px;
}
#container {
float: left;
width: 800px;
}
#fa {
float: right;
height: auto;
width: 160px;
}
#fotter {
clear: both;
}
#main {
float: right;
width: 600px;
}
#side {
float: left;
width: 200px;
}
body {
margin: 0px;
padding: 0px;
width: 960px;
}
-->
</style>
</head>
<body>
<div id =”container”>こんてなはじめ<div id=”header”>へっだー </div><div id=”main”>めいん</div><div id=”side”>さいど</div>こんてなおわり</div>
<div id=”fa”>ads エリア</div><div id=”fotter”>ふったー</div>
</body>
</html>

●質問者: kidd_pclabo
●カテゴリ:コンピュータ 科学・統計資料
✍キーワード:BODY CSS FA IE margin
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● stnet
●30ポイント

http://www.stupid-net.com/x/mt/archives/000188.shtml

表示の崩れない3段カラム [ MSM-03C ]

―ヘッダー――|ads

さいど|メイン|

――フッター―――

って配置で良いんですかね?


bodyタグにwidthを指定してもダメです.

あと回り込む要素を前に書かないと回り込んでくれないですね


<style type=”text/css”>

<!--

div

{

margin: 0px;

padding: 0px;

}

#container {

float: left;

width: 800px;

}

#fa {

float: right;

height: auto;

width: 160px;

}

#fotter {

clear: both;

}

#main {

float: right;

width: 600px;

}

#side {

float: left;

width: 200px;

}

#body {

margin: 0px;

padding: 0px;

width: 960px;

}

-->

</style>

</head>

<body>

<div id=”body”>

<div id=”fa”>ads エリア</div>


<div id =”container”>

<div id=”header”>へっだー </div>

<div id=”main”>めいん</div>

<div id=”side”>さいど</div>

</div>

<div id=”fotter”>ふったー</div>


</div></body>

</html>

◎質問者からの返答

おお、ちゃんとなりました。

できれば、adsは重要度からいって、後ろの方がいいのですが、そうする方法はありませんか?

参照URLでわかりました。ありがとうございました!


2 ● apo-gee
●15ポイント

http://www.tohoho-web.com/css/

とほほのスタイルシート入門

body width: 960px

#container width: 800px

#fa width: 160px

ということですので、

body の中に#containerと#faが入り、

#containerの右側に#faが回り込むようにするということですね。

floatは、指定したdivブロックをleftまたはrightに配置して後ろに続く要素をその反対に回り込ませますので、#fa要素はfloat: left;またはnone;ではないでしょうか。


3 ● ggg
●15ポイント

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

Yahoo! JAPAN

CSSを下記に差し替えでいかがでしょうか?


<style type=”text/css”>

<!--

div

{

margin: 0px;

padding: 0px;

}

#container {

float: left;

width: 800px;

}

#fa {

float: left;

height: auto;

width: 160px;

}

#fotter {

clear: both;

}

#main {

float: right;

width: 600px;

}

#side {

float: left;

width: 200px;

}

body {

margin: 0px;

padding: 0px;

width: 960px;

}

-->

</style>

◎質問者からの返答

おお、ちゃんとなりました。

できれば、adsは重要度からいって、後ろの方がいいのですが、そうする方法はありませんか?

参照URLでわかりました。ありがとうございました!

関連質問


●質問をもっと探す●



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