By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

while aligning text to bottom of page ,facing resize problem

P: n/a
Hi,

I want to align some text to the bottom of page.I am doing this by a
CSS class.It contains

position:absolute;
bottom:0;

this does the purpose. but when I resize my page to smaller size, the
text at the bottom overlaps my text written in the page above it.

I want to overcome this issue. The text at the bottom must not
override the text at top.

Is there anyway which makes my text to be aligned to bottom only till
it reaches a particular point from the top? after that it must not
move up along with the page end.

Any help would be appreciated.

Apr 19 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 2007-04-19, kk*********@gmail.com <kk*********@gmail.comwrote:
Hi,

I want to align some text to the bottom of page.I am doing this by a
CSS class.It contains

position:absolute;
bottom:0;

this does the purpose. but when I resize my page to smaller size, the
text at the bottom overlaps my text written in the page above it.

I want to overcome this issue. The text at the bottom must not
override the text at top.

Is there anyway which makes my text to be aligned to bottom only till
it reaches a particular point from the top? after that it must not
move up along with the page end.

Any help would be appreciated.
You can do something along these lines:

<style type="text/css">
html, body, #container { height: 100%; }
#container { min-height: 500px; position: relative; }
#footer { position: absolute; bottom: 0; }
</style>

...
<div id="container">
<div id="footer">footer</div>
</div>

I think min-height may not work in IE.
Apr 19 '07 #2

P: n/a
hi Ben C,

I dont think that there is some standard way to do this...anywayz I
have written customized code for this to work. Here is the code :
<html>
<head>
<style type="text/css">
..Footer
{
position:absolute;
bottom:0;

}
..Footer1
{
position:absolute;
top:116;
}

</style>
<script type="text/javascript">
function offsetHeight1()
{
var it=kk1.offsetTop + kk1.offsetHeight;
alert(it)
//alert(kk1.offsetHeight)
}
function clientHeight1()
{
//alert(document.body.clientHeight)
alert(document.body.clientHeight-kk1.offsetHeight);
}
function kk()
{
if(document.body.clientHeight-foodiv.offsetHeight <kk1.offsetTop +
kk1.offsetHeight)
{
document.all.foodiv.className="footer1";
}
else
{
document.all.foodiv.className="footer";
}
}
</script>

</head>
<body onresize ="kk()">

<form>
<div id="kk1">
<input type="button" onclick="offsetHeight1()" value="offsetHeight">
<input type="button" onclick="clientHeight1()" value="clientHeight">
<p>By pressing the button, a functions will be called. The function
will alert a message.<br>
ssfdsdfdfd<br>asdasf</p>
</div>
</form>
<div id="foodiv" class ="footer">this is the text at bottom1<br>this
is the text at bottom2<br>this is the text at bottom3<br>this is the
text at bottom4<br>this is the text at bottom5</div>

</body>
</html>

Anywayz thanks for the reply
May 24 '07 #3

P: n/a
kk*********@gmail.com wrote:
hi Ben C,

I dont think that there is some standard way to do this
To do what? You've lost the context. You're replying to a post from five
weeks ago. Quoting some of the previous discussion would have been
thoughtful and potentially helpful.
...anywayz I
have written customized code for this to work. Here is the code :
And you're saying this works for you? You're now satisfied?
<html>
<head>
<style type="text/css">
.Footer
{
position:absolute;
bottom:0;

}
.Footer1
{
position:absolute;
top:116;
}
You'll be needing some units. Try top:116px;
>
</style>
<script type="text/javascript">
function offsetHeight1()
{
var it=kk1.offsetTop + kk1.offsetHeight;
alert(it)
//alert(kk1.offsetHeight)
}
function clientHeight1()
{
//alert(document.body.clientHeight)
alert(document.body.clientHeight-kk1.offsetHeight);
}
function kk()
kk? What an uninformative function name. What's it indicate?
{
if(document.body.clientHeight-foodiv.offsetHeight <kk1.offsetTop +
kk1.offsetHeight)
{
document.all.foodiv.className="footer1";
I see "footer1" rather than "Footer1" as in your CSS.
}
else
{
document.all.foodiv.className="footer";
I see "footer" rather than "Footer" as in your CSS.
}
}
</script>

</head>
<body onresize ="kk()">

<form>
<div id="kk1">
<input type="button" onclick="offsetHeight1()" value="offsetHeight">
<input type="button" onclick="clientHeight1()" value="clientHeight">
<p>By pressing the button, a functions will be called. The function
will alert a message.<br>
ssfdsdfdfd<br>asdasf</p>
</div>
</form>
<div id="foodiv" class ="footer">this is the text at bottom1<br>this
is the text at bottom2<br>this is the text at bottom3<br>this is the
text at bottom4<br>this is the text at bottom5</div>

</body>
</html>
You have included more code than you needed to; a URL would have been
much better. Especially since I suspect the code you posted isn't really
the functioning code on your page.

Also, you've complicated things be including a JS form as part of the
content. It seems to me manual resizing would have been better.

I don't understand the logic of your supposed solution anyway. Where'd
you get the 116px? How does that relate to my font size or the width of
my browser?

Is this related to what Ben C suggested? It doesn't look like it.

--
John
May 24 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.