|
CSS - Align Footer To Bottom After Table Ends
I have a css layout I'm working, that is all divs (my first time doing this without tables).
My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. Similar TutorialsOk, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out. Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--CSS-->
<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<title> MY TITLE GOES HERE! </title>
</head>
<body>
<div id="container">
<div id="nav_container">
MY MENU STUFF GOES HERE!
</div>
<div id="content">
<div id="left_column">
BLAH BLAH all my content goes here!
</div>
<div id="right_column">
ALL OF MY RIGHT CONTENT HERE!
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and this is the stylesheet driving the page: Code:
body {
background-image: url("gfx/bg.jpg");
background-repeat: repeat-y;
background-position: center;
background-color: #FFFFFF;
margin: 0px;
font-family: Tahoma;
font-size: 13px;
}
/*Page Structure --------------------------------------*/
#container {
background-color: #FFFFFF;
position: absolute;
left: 50%;
margin-left: -394px;
width: 790px;
height: 100%;
border: 1px solid Black;
border-top: 0px;
border-bottom: 0px;
}
#content {
background-color: #FFFFFF;
width: 790px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#left_column {
width: 390px;
float: left;
display: inline;
margin: 15px 0 0 20px;
padding: 0px 0px 15% 4px;
border-right: 1px solid #DFDFDF;
}
#right_column {
width: 326px;
float: left;
margin: 15px 0 0 0px;
padding-bottom: 10%
}
/*Headers and Flash content -----------------------------*/
#header {
background-image: url("gfx/header.jpg");
width: 790px;
height: 101px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#home_header {
background-image: url("gfx/home_header.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 380px;
height: 150px;
margin: 0px 0 10px 0px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#recent_posts {
background-image: url("gfx/recent_posts.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin-left: 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#latest_threats {
background-image: url("gfx/latest_threats.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#recommended_sites {
background-image: url("gfx/recommended_sites.jpg");
background-repeat: no-repeat;
width: 215px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#flash {
background-color: #000000;
width: 790px;
height: 120px;
float: left;
vertical-align: middle;
}
/*Navigation --------------------------*/
#nav_container {
background-image: url("gfx/nav_bg.jpg");
background-color: #FFFFFF;
width: 790px;
height: 24px;
float: left;
text-align: right;
}
/*News Structure --------------------------*/
#news_header {
background-color: #FFFFFF;
width: 390px;
height: auto;
float: left;
font-size: large;
font-weight: bold;
color: #009AFF;
margin: 3px 0 2px 0;
}
#news_post {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
color: Gray;
margin: 0px;
}
#news_date {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
font-size: 11px;
font-style: italic;
color: Gray;
margin-left: 5px;
}
#news_content {
background-color: #FFFFFF;
width: 390px;
float: left;
margin-top: 20px;
}
/*Lists----------------------------------*/
#post_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#post_list li {
background-color: transparent;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
#threats_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#threats_list li {
background-color: transparent;
list-style-image: url("gfx/red_arrow2.jpg");
list-style-position: inside;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
/*Footer--------------------------------------------------*/
#footer {
background-image: url("gfx/footer.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 790px;
height: 125px;
float: left;
margin-top: 40px;
}
Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this Thanks in advance, AA. I am intergating my forum software into my main page. I have created a 100% non-table front page, but there is one table that is stuck at the bottom of the page by the forum software. So my DIV tag ends and a TABLE begins and they overlap. I placed a clear:both DIV tag after my last DIV tag, but that didn't seem to help. I don't think I can convert the TABLE to DIV since it's part of the software. I was just thinking of adding a height:20px to my "clearit" DIV to pad the bottom enough to push the table down but that seems hokey. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I have three divs. The main div contains the background color and border. The second div has text, and The third has an img. What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div. Can someone please help me. I have attached the code below it is all messed up cause I have been trying everything I can think of. ".abouttestcontainer { width : 100%; float : left; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; color : #001F56; background-color : #DDEADE; border : 1px solid black; } .abouttest { float : left; width : 450px; height : 100%; padding : 10px 50px 0px 10px; text-align : left; font-size : 12px; border : 1px solid black; margin-right : 10px; } .aboutimage { border : 1px solid black; position : relative; display : inline; vertical-align : bottom; }" Hi there, I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides. This is my CSS: PHP Code: #nav_wrapper{ } #nav_left{ width: 620px; padding-left: 20px; float:left; } #nav_right{ float:right; text-align: right; padding-right: 20px; } #member_login{ width: 180px; padding: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; background-color: #f6f6f6; line-height: 200%; } #member_login a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; font-weight:bold; text-decoration:underline; } and this is my HTML: PHP Code: <div id="nav_wrapper"> <div id="nav_left"> left content <div id="nav_right"> <div id="member_login"> right content </div> </div> </div> Any ideas? ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out? thx Hi there, my first post here. I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom. the site is at w w w. montrosemusicseries com / indextest html I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions? Thanks, Stuart I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar. Does anybody know how to do this? Any help would be appreciated. Thank you! I believe this has been asked before, but I'm unsure what search terms to use... Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far? I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Hey I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages. Can anyone shed some light? Here is my code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" /> <style type="text/css"> <!-- /* CSS Document */ body{ background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:80%; text-align:center; } #wrapper{ width: 750px; background-color:#FFFFFF; margin: 10px auto; text-align: left; } /* ---------------------------------Header content---------------------------------------------*/ #header { height: 150px; border-bottom: 1px solid #CC0000; } /*this is to make sure al content apears below the header*/ .clearit{ clear: both; display: block; } /*---------------------------------Main Contant------------------------------------------------*/ #content { background-color:#FFFFFF; margin-left:177px; margin-top:25px; margin-right:100px; } #content p{ background-color:#FFFFFF; } #content h1{ font-size: 140%; color: #CC0000; padding: 0; margin-bottom:20px; font-weight:bold; } #content h2{ font-size: 110%; color: #CC0000; padding: 0; margin-top:30px; } #content li{ color:#000000; list-style-position:inside; list-style-type:disc; } #content form h3{ font-size: 100%; color: #CC0000; padding: 0; margin:0; } #content form h2{ font-size: 115%; color: #CC0000; padding: 0; text-transform:uppercase; } .BoldRed{ color:#CC0000; font-weight:bold; } .verse{ color:#006699; font-style:italic; } /*use for commendattions names*/ .greyed { color:#666666; font-style:italic; } .leftimage{ float: left; margin-right: 10px; margin-bottom:10px; border: 1px solid #000000; clear:left; } .container{ width:99%; float:right; } /*-------------------------------Left Collum Content---------------------------------------------*/ #leftcol { font-size:100%; margin-top:30px; float:left; width: 167px; background-color: #FFFFFF; } /*------------------------------Footer Content---------------------------------------------------*/ #footer{ margin-top:30px; border-top: 1px solid #CC0000; background-color: #FFFFFF; color: #000000; clear: both; } --> </style> </head> <body> <!-- Start wrapper --> <div id="wrapper"> <!-- Start of Header --> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150"> <param name="movie" value="../homepageFlashElements/header.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed> </object> <!-- Clear a line--> <div class="clearit"> </div> </div> <!-- End of Header --> <!-- Start of Left Colum --> <div id="leftcol"> <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div> <p> Navigation content here </p> <p></p> </div> <!-- End of Left Colum --> <!-- Start of Content --> <div id="content"> <h1>Heading</h1> <p>Some Content. This may very in length</p> </div> <!-- End of Content --> <!-- Start of Footer --> <div id="footer"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50"> <param name="movie" value="../homepageFlashElements/footer.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed> </object> </div> <!-- End of Footer --> </div> <!-- End wrapper --> </body> </html> http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. How would I align a div to the true bottom (by this i mean below the viewport. at current i use: Code:
.footer
{
background-color:#FFFFFF;
width:100%;
height:20px;
color:#000000;
position:absolute;
bottom:0px;
}
but this just aligns my div to the bottom of my window, not the bottom of the page, if i then need to scroll down it is visible that its not at the bottom of the page. any ideas? So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so: Code: | LEFT | MIDDLE | | | (top) | | | | | | | | | | | | | | | | | | | | | | RIGHT | | | | (bottom) | Any idea how to do it? Thx! I have a div container that changes size depending on the information inside it... i also have a navi bar that is on everysingle page.... and i want it to always be 20px from the bottom.... i tried vertical-align:bottom and put a margin-bottom:20px on it... but the vertical-align didnt seem to work... i must be missing something Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> |
|||||||