PDA

View Full Version : CSS - Align bottom


kabatak
November 22nd, 2003, 04:53
Is there a way to align an element at the bottom of a page w/o using tables?
Canuckkev
November 22nd, 2003, 09:24
<div style="vertical-align : bottom">This is aligned to the bottom</div>

Or <span>.

Try that, I think it should work...?
kabatak
November 22nd, 2003, 13:30
i guess that is the only available tag but in this situation it doesn't work:



#footer span.left {
float:left;
text-align:left;
}
#footer span.right {
float:right;
text-align:right;
vertical-align:bottom;
}
-----------------------------------------

<div id="footer">

<span class="left">
<br /><br /><br /><br /><br /><br />
</span>

<span class="right">
Hello World
</span>

</div>

i'm sure there must be some fix
CareBear
November 22nd, 2003, 17:02
My guess would be that the browser is behaving as it's supposed to... the actual height of your <body>..</body> isn't related to the size of your browser window.


<html>
<head>
<style>
body {
overflow: hidden;
padding-bottom: 100px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0px;
}
#footer .left {
float:left;
text-align:left;
}
#footer .right {
float:right;
text-align:right;
}
</style>
</head>
<body>

<div id="content">
Your main content will go here
</div>

<div id="footer">
<span class="left">
<br /><br /><br /><br /><br /><br />
</span>
<span class="right">
Hello World
</span>
</div>
</body>
</html>The above should work, but with the downside that by doing it this way you will need to know the exact size of your footer (I took 100px as an example).
This is the only way I can think of that doesn't require the use of tables or javascript to keep everything in its proper place.
Hope it helps.
ranvier
November 23rd, 2003, 00:29
I am not sure but you may try this guide. ;)

HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/article/1172)
kabatak
November 23rd, 2003, 02:47
i think it still doesnt work carebear, look if we replace the <br> with actuall text you notice hello world is not at the bottom.



<html>
<head>
<style>
body {
overflow: hidden;
padding-bottom: 100px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0px;
}
#footer .left {
float:left;
text-align:left;
}
#footer .right {
float:right;
text-align:right;
}
</style>
</head>
<body>

<div id="content">
Your main content will go here
</div>

<div id="footer">
<span class="left">
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
</span>
<span class="right">
Hello World
</span>
</div>
</body>
</html>
CareBear
November 23rd, 2003, 08:58
<html>
<head>
<style>
body {
overflow: hidden;
padding-bottom: 150px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0px;
}
#footer .left {
float:left;
text-align:left;
height: 150px;
}
#footer .right {
float:right;
text-align:right;
height: 150px;
}
</style>
</head>
<body>

<div id="content">
Your main content will go here
</div>

<div id="footer">
<span class="left">
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
</span>
<span class="right">
<div style="height: 100%">&nbsp;</div>
Hello World
</span>
</div>
</body>
</html>Why don't you design the footer first and worry about getting everything in the right spot at the end?
CareBear
November 23rd, 2003, 09:25
This is better:
<html>
<head>
<style>
body {
overflow: hidden;
padding-bottom: 150px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
height: 150px;
overflow: hidden;
}
#footer .left {
height: 100%;
}
#footer .right {
float: right;
text-align: right;
width: 200px;
height: 100%;
}
</style>
</head>
<body>

<div id="content">
Your main content will go here
</div>

<div id="footer">

<div class="left"><div style="position: absolute; bottom: 0px;">
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
</div></div>

<div class="right"><div style="position: absolute; bottom: 0px; right: 0px;">
Hello World
</div></div>

</div>
</body>
</html>Don't forget to adjust the height of the entire footer and the width of the right pane (in bold).
kabatak
November 23rd, 2003, 09:38
that works, thanks :)