左側にテキスト、右側にさまざまなロゴなどを配置したシンプルな 2 列のページを作成しようとしています。右の列の一番下に、テキストを配置する必要があります。私が必要としていたのはシンプルなposition: absolute; width: 250px; bottom: 0;
ものだけのように思えました。これが私が思いついたコードで、ここでもホストされています:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
background-color: #eee;
}#content{
background: white;
width: 900px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}#text{
padding-left: 8px;
padding-right: 8px;
}.left{
width: 634px;
border-right: 2px solid black;
}.right{
width: 250px;
text-align: center;
position: relative;
}.bottom{
position: absolute;
width: 250px;
bottom: 0;
}
</style>
</head>
<body>
<center>
<div id="content">
<div id="body">
<table border=0>
<tr valign="top">
<td id="text" class="left">
Some text
</td><td class="right">
<center class="bottom">
Bottom
</center>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
このソリューションは、Firefox を除くすべてのブラウザーで機能します。Firefox は、要素を に設定されているかのように扱い、要素position:fixed
の下部 (通常は画面の下部から離れています) ではなく、画面の下部にロックします。この問題を抱えている人を他に見つけられないようです。これは、私が何か間違ったことをしていることを意味します。私はこれを何時間もいじりましたが、結果は変わりません。どんな助けでも大歓迎です。