vlg
asked on
Can a DIV really be aligned to the bottom?
Hello,
I tried an answer from a question in this forum, and I guess I have a different definition of the bottom.
Open this html page in a full-screen browser window:
<html>
<head>
<style type="text/css">
<!--
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: normal;
bottom: 20px;
}
#topleft {
font-size: 80%;
float: left;
}
#botright {
font-size: 80%;
float: right;
}
//-->
</style>
</head>
<body>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container">
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
and you'll see the DIV below the page content, but nowhere near what I'd call the bottom.
If you change the position to absolute in the "container", then refresh the page, it goes to what I'd call the bottom of the page, but then, if you re-size the window so that it's so small that you can't even see the text in the "thanks" paragraph, the div text gets drawn over other content in the page, and looks terrible.
So my points are for someone who can provide me with a solution:
Get the div on what I consider the bottom, but make it handle re-sizing, really small windows, etc.
Thanks!
v
I tried an answer from a question in this forum, and I guess I have a different definition of the bottom.
Open this html page in a full-screen browser window:
<html>
<head>
<style type="text/css">
<!--
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: normal;
bottom: 20px;
}
#topleft {
font-size: 80%;
float: left;
}
#botright {
font-size: 80%;
float: right;
}
//-->
</style>
</head>
<body>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container">
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
and you'll see the DIV below the page content, but nowhere near what I'd call the bottom.
If you change the position to absolute in the "container", then refresh the page, it goes to what I'd call the bottom of the page, but then, if you re-size the window so that it's so small that you can't even see the text in the "thanks" paragraph, the div text gets drawn over other content in the page, and looks terrible.
So my points are for someone who can provide me with a solution:
Get the div on what I consider the bottom, but make it handle re-sizing, really small windows, etc.
Thanks!
v
Hi,
is this what you want? (ie only version)
<script>
function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container"function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container" style="position:absolute;t
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
Vinny
is this what you want? (ie only version)
<script>
function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container"function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container" style="position:absolute;t
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
Vinny
ASKER
Hi Vinny,
Thanks for trying, but your suggestion doesn't seem to work. I tried my best to clean it up, and maybe I screwed something up, but I couldn't get it to do what I wanted.
v
Thanks for trying, but your suggestion doesn't seem to work. I tried my best to clean it up, and maybe I screwed something up, but I couldn't get it to do what I wanted.
v
Hi v,
>>> I couldn't get it to do what I wanted.
In what way?
>>I tried my best to clean it up, and maybe I screwed something up
mind posting it?
Vinny
>>> I couldn't get it to do what I wanted.
In what way?
>>I tried my best to clean it up, and maybe I screwed something up
mind posting it?
Vinny
ASKER
This is what I tried, and the only flaw is that if you open it in a window that is too small to display all the content at once (i.e., you must scroll down to see, e.g., the "thanks" paragraph) the browser writes the footer over the displayed content.
IOW, the footer is always written in the visible part of the window, regardless.
<html>
<head>
<style type="text/css">
<!--
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: normal;
bottom: 20px;
}
#topleft {
font-size: 80%;
float: left;
}
#botright {
font-size: 80%;
float: right;
}
//-->
</style>
<script>
function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container" style="position:absolute;t
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
Was this a faithful attempt to implement your suggestion?
IOW, the footer is always written in the visible part of the window, regardless.
<html>
<head>
<style type="text/css">
<!--
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: normal;
bottom: 20px;
}
#topleft {
font-size: 80%;
float: left;
}
#botright {
font-size: 80%;
float: right;
}
//-->
</style>
<script>
function init()
{
x= document.body.offsetHeight
document.getElementById('c
}
</script>
</head>
<body onload='init()'; onresize='init()'>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container" style="position:absolute;t
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
</html>
Was this a faithful attempt to implement your suggestion?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Vinny,
It technically does what I asked for, so I'll give you the points because of your effort, but have you tried it?
Anyways, in case someone searches this in the archives, the answer is here:
http://scott.sauyet.name/CSS/Demo/FooterDemo.css
It technically does what I asked for, so I'll give you the points because of your effort, but have you tried it?
Anyways, in case someone searches this in the archives, the answer is here:
http://scott.sauyet.name/CSS/Demo/FooterDemo.css
ASKER
I just read my comment, and I don't like it's tone, so I wanted to add this:
Vinny, your effort and help were nothing short of terrific, and you deserved & earned the 'A' I gave you.
Also, I found the solution on the web through sheer blind dumb luck, on about page 14 of a Google Search...
Vinny, your effort and help were nothing short of terrific, and you deserved & earned the 'A' I gave you.
Also, I found the solution on the web through sheer blind dumb luck, on about page 14 of a Google Search...
Hi v,
I admit twas my blindness. Your original code was 'almost' there:
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: absolute;
bottom: 0;
}
<body>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container">
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
Vinny
I admit twas my blindness. Your original code was 'almost' there:
#container {
border-top: thin solid #CCC 1px;
color: #CCC;
position: absolute;
bottom: 0;
}
<body>
<h1>header 1</h1>
<p>test</p>
<p>more testing</p>
<p>thanks </p>
<div id="container">
<div id="topleft">on the left</div>
<div id="botright">on the right</div>
</div>
</body>
Vinny
The more content yu add the further down it will be.
If you use absolute position it will be there all the time.
you could use javascript to move it where ya want it on resize, but IMHO i would and hope you have more content