How do i align a table to the bottom of the screen with css? I have seached google and haven't find a solution. Can anyone point me to a page or explain?
Thanks
Kristoffer
Subscribe to HRA Now!
Are you a Google Analytics enthusiast?
Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!
www.CustomReportSharing.com
From the folks who brought you High Rankings!
More SEO Content
International SEM | Social Media | Search Friendly Design | SEO | Paid Search / PPC | Seminars | Forum Threads | Q&A | Copywriting | Keyword Research | Web Analytics / Conversions | Blogging | Dynamic Sites | Linking | SEO Services | Site Architecture | Search Engine Spam | Wrap-ups | Business Issues | HRA Questions | Online Courses
Sponsored Content
Vertical Aligning Of Tables In Css
Started by
Crifer
, Sep 19 2004 08:54 AM
10 replies to this topic
#2
linux_lover
-
- Active Members
-
- 831 posts
LiLo
- Location:York, UK
Posted 19 September 2004 - 12:21 PM
have you tried the vertical-align property? Other than that position your element relative to everything else on the page...
Have a look at w3schools.com - excellent reference site.
Have a look at w3schools.com - excellent reference site.
#3
Ron Carnell
-
- Moderator
-
- 959 posts
HR 6
- Location:Michigan USA
Posted 19 September 2004 - 03:27 PM
There's a difference between aligning something to the bottom of the screen and to the bottom of the page. Both, I'm pretty sure, would require JavaScript to actively manipulate the CSS properties depending on the calculation of other dimensions.
#4
Crifer
-
- Active Members
-
- 70 posts
HR 3
- Location:Sweden
Posted 19 September 2004 - 06:19 PM
Hi!
Linux_lover: No, I can't use vertical-alignment since that only apply to inline elements and i want to apply it to block-level elements.
Ron: Yes, i want to align it to the bottom of the screen and it's very tricky. It seems like i have to use javascript but I would like to avoid it. I been trying to find a workaround but then i have to lose the DOCTYPE tag.
I have investigated the doctype tag and if I remove it and keep the page simple there shouln't be a problem with the other browsers. I use a table and set the width and height to 100% and then put the alignment to center and verticalaligment to bottom. That's my solution so far. I haven't looked in to some workaround with css and the doctype, I read a post on a forum (I think it was w3 own forum) and someone made a post about the trouble with vertical aligment in the css2 standard.
If you know any javascripts or css workarounds to the problem I would be happy if you could help me out.
Linux_lover: No, I can't use vertical-alignment since that only apply to inline elements and i want to apply it to block-level elements.
Ron: Yes, i want to align it to the bottom of the screen and it's very tricky. It seems like i have to use javascript but I would like to avoid it. I been trying to find a workaround but then i have to lose the DOCTYPE tag.
I have investigated the doctype tag and if I remove it and keep the page simple there shouln't be a problem with the other browsers. I use a table and set the width and height to 100% and then put the alignment to center and verticalaligment to bottom. That's my solution so far. I haven't looked in to some workaround with css and the doctype, I read a post on a forum (I think it was w3 own forum) and someone made a post about the trouble with vertical aligment in the css2 standard.
If you know any javascripts or css workarounds to the problem I would be happy if you could help me out.
#5
chrishirst
-
- Moderator
-
- 5,878 posts
A not so moderate moderator.
- Location:Blackpool UK
Posted 19 September 2004 - 08:21 PM
This works for me cross-browser 4.01 transitional doctype.
keeps a <div class="fixed_btm"> at the bottom of the browser window
CODE
.fixed_btm {
position:relative;
width:100%;
bottom:0%;
height:30px;
border:solid 2px orange;
background-color:blue;
}
position:relative;
width:100%;
bottom:0%;
height:30px;
border:solid 2px orange;
background-color:blue;
}
keeps a <div class="fixed_btm"> at the bottom of the browser window
#6
Crifer
-
- Active Members
-
- 70 posts
HR 3
- Location:Sweden
Posted 20 September 2004 - 02:52 AM
That didn't work for me.. the div won't move an inch from the top. This is how my code look like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">
<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" bgcolor="#CCCCCC">
</td>
</tr>
</table>
<div class="fixed_btm"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">
<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" bgcolor="#CCCCCC">
</td>
</tr>
</table>
<div class="fixed_btm"></div>
</body>
</html>
#7
chrishirst
-
- Moderator
-
- 5,878 posts
A not so moderate moderator.
- Location:Blackpool UK
#8
Crifer
-
- Active Members
-
- 70 posts
HR 3
- Location:Sweden
Posted 20 September 2004 - 07:34 AM
Yes!! You made my day. Now I got plenty work to do 
Thank you very much!
Thank you very much!
#9
Crifer
-
- Active Members
-
- 70 posts
HR 3
- Location:Sweden
Posted 20 September 2004 - 08:02 AM
Hmm.. it doesn't work in NN7, Mozilla, FireFox and Opera... Only in IE..
#10
chrishirst
-
- Moderator
-
- 5,878 posts
A not so moderate moderator.
- Location:Blackpool UK
Posted 20 September 2004 - 09:16 AM
curious,
I've tested it with IE5.0.37, IE6.0.28, Firefox 0.9.2, NN 7.1. Opera 7.54 all work exactly as intended and all look the same. Well apart from IE5 which doesn't understand the margin:auto for centre align.
Page code that is working as the online demo.
and the CSS for class main is
and the includes are just the page header and footer details.
I've tested it with IE5.0.37, IE6.0.28, Firefox 0.9.2, NN 7.1. Opera 7.54 all work exactly as intended and all look the same. Well apart from IE5 which doesn't understand the margin:auto for centre align.
Page code that is working as the online demo.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Anchoring Text to the bottom of the page with CSS</title>
<style type="text/css">
.fixed_btm {
position:absolute;
bottom:1%;
border:solid 2px orange;
margin:auto;
}
</style>
<link rel="stylesheet" href="/tutorials/include/style.css">
</head>
<body>
<div class="main">
<!--#include virtual="/include/site/inc_page_header.asp"-->
<br>
<br>
Keeping a footer div anchored to the bottom of the browser window.
<br>
<br>
<div class="code_breakout">
<span class="brkoutheader">
CSS Style for footer<br>
</span>
<pre>
.fixed_btm {
position:absolute;
bottom:1%;
border:solid 2px orange;
margin:auto;
}
</pre>
</div>
<br>
<br>
<div class="fixed_btm">
<!--#include virtual="/include/site/inc_page_footer.asp"-->
</div>
</div>
</body>
</html>
<html>
<head>
<title>Anchoring Text to the bottom of the page with CSS</title>
<style type="text/css">
.fixed_btm {
position:absolute;
bottom:1%;
border:solid 2px orange;
margin:auto;
}
</style>
<link rel="stylesheet" href="/tutorials/include/style.css">
</head>
<body>
<div class="main">
<!--#include virtual="/include/site/inc_page_header.asp"-->
<br>
<br>
Keeping a footer div anchored to the bottom of the browser window.
<br>
<br>
<div class="code_breakout">
<span class="brkoutheader">
CSS Style for footer<br>
</span>
<pre>
.fixed_btm {
position:absolute;
bottom:1%;
border:solid 2px orange;
margin:auto;
}
</pre>
</div>
<br>
<br>
<div class="fixed_btm">
<!--#include virtual="/include/site/inc_page_footer.asp"-->
</div>
</div>
</body>
</html>
and the CSS for class main is
CODE
.main {
width:765px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:auto;
padding:0px 0px 0px 0px;
}
width:765px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:auto;
padding:0px 0px 0px 0px;
}
and the includes are just the page header and footer details.
#11
Crifer
-
- Active Members
-
- 70 posts
HR 3
- Location:Sweden
Posted 20 September 2004 - 09:43 AM
I get the bottom to work now but it won't center.. IE 6 have problems, the table is pushed below the bottom and centers more to the right. Mozilla and the other aligns to the left. Heres the code:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FCEDDD;
padding:0px;
}
.pageSetting {
width:740px;
bottom:0%;
position:absolute;
margin:auto;
background-color:#999999;
}
</style>
</head>
<body>
<div align="center">
<div class="pageSetting">
<table width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FCEDDD;
padding:0px;
}
.pageSetting {
width:740px;
bottom:0%;
position:absolute;
margin:auto;
background-color:#999999;
}
</style>
</head>
<body>
<div align="center">
<div class="pageSetting">
<table width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
