Footer Issues

[AmenKa]

Hey, I have some footer issues going on. I set the footer up and it displays at the bottom of the page... The content needs to push the footer down, so that it shows and the footer gets pushed below page (with a vertical scroll bar).

The footer is one div, there are three other divs that need to aligne 15 pixels above it, no matter the content height. If the content is longer than the window, I want it to push the footer down and keep it 15px below the content divs...


#mainbody {
position:absolute;
margin-top:195px;
margin-left:245px;
margin-bottom:165px;
width:310px;
height:auto;
padding:0px;
border:0px;
background-image:url(images/file.png);
}
#lsub2body {
position:absolute;
margin-top:365px;
margin-left:30px;
margin-bottom:165px;
width:200px;
height:auto;
padding:0px;
border:0px;
background-image:url(images/file.png);
}
#rsub2body {
position:absolute;
margin-top:365px;
margin-left:570px;
margin-bottom:165px;
width:200px;
height:auto;
padding:0px;
border:0px;
background-image:url(images/file.png);
}
#footer {
position:absolute;
bottom:0px;
margin-left:0px;
margin-bottom:0px;
width:800px;
height:150px;
padding:0px;
border:0px;
background-image:url(images/file.png);
}


<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="background">
<div id="header" class="text">Header</div>
<div id="lsub1title" class="text">Title</div><div id="maintitle" class="text">Title</div><div id="rsub1title" class="text">Title</div>
<div id="lsub1body" class="text">Body</div><div id="mainbody" class="text">Body</div><div id="rsub1body" class="text">Body</div>
<div id="lsub2title" class="text">Title</div><div id="rsub2title" class="text">Title</div>
<div id="lsub2body" class="text">Body</div>
<div id="rsub2body" class="text">Body</div>
<div id="footer" class="text">Footer</div>
</div>
</td>
</tr>
</table>

[boogyman]

for starters, get rid of the table declaration and just use the divs / css.
I can see that you want it to be 800 pixels wide and you want it centered on the page, that is very easily atained.


body {
margin: 0 auto;
width: 800px;
text-align: center;
}
div#background {
text-align: justify;
}


delete all of your references to absolute positioning and placement (top/left/right/bottom)
that will trump the content of the actual page and break your layout.
just as a note, by default any element will expand to fit the content enclosed within it, unless otherwise restricted, which is what absolute positioning forces the elements to do

you said you want some padding above the footer okay


div#footer {
margin-top: 15px;
}


what you have laid out is extremely confusing I do not know where you want what, because you have at least 2 if not 3/4 divs per section (title,body). I believe this is probably a gross overuse of the div element. If some of your body div's are just going to hold content you probably should be using paragraph tags(p) instead.

[AmenKa]

I also need the footer to be at the bottom of the page even if the content doesnt go all teh way to the bottom...

[boogyman]

you cant have both.

it will either stick to the bottom of the page or you will scroll to the bottom.

[AmenKa]

ok, i have simplified it considerably, the three columns line up correctly and all, but the footer stays at the bottom of the text... how do i make it so it is exactly the same, but is at the bottom of the text, or if the text isn't long enough to push it beyond the bottom of the page.. at the bottom of the page?



body {
margin: 0 auto;
width: 800px;
text-align: center;
background-color:#000000;
}
#background {
width:800px;
text-align: justify;
background-image:url(images/file.jpg);
}
#header {
width:800px;
height:150px;
padding:0px;
border:0px;
background-image:url(images/file.png);
}
#sub-left {
width:200px;
height:25px;
padding:0px;
border:0px;
float:left;
}
#main {
width:400px;
height:30px;
padding:0px;
border:0px;
float:left;
}
#sub-right {
width:200px;
height:25px;
padding:0px;
border:0px;
float:right;
}
#footer {
width:800px;
height:150px;
padding:0px;
border:0px;
float:right;
background-image:url(images/file.png);
}




<!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=utf-8" />
<title>Medieval Conflicts</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="background">
<div id="header"></div>
<div id="sub-left"></div><div id="main"></div><div id="sub-right"></div>
<div id="footer"></div>
</div>
</body>
</html>

[boogyman]

3 column main section? correct?



div#background {
width: 100%;
min-width: 770px /* IE 800x600 Friendly */
float: left; /* Hack to allow height to follow the encapsulated content */
}
div#header {
}
div#sub-left {
float: left;
width: 20%;
}
div#sub-right {
float: right;
width: 20%;
}
div#main {
width: 54%;
margin-left: 23%;
margin-right: 23%;
}
div#footer {
clear:both;
}

if you do the math you will see that there is some padding left, and that is for 2 reasons
White-space is your friend
Help with browser render
not all browsers render the same way so by giving it some extra padding, you will not cause elements to overlap thus pushing one/more of them below where needed, and thus breaking the layout.

the other thing I did was set a default width to 100% of the available width, this will ensure it uses as much as possible, but can very easily be reduced to fit your needs, and the minimum width will allow Firefox to prevent the browser from scaling the viewport below 770pixels and add a horizontal scroll bar if it does. this is for 800x600 resolution friendly. although a note on this is Opera 9.2 and IE6- do not support this feature, so you would need to use some javascript to hack around this. http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

[AmenKa]

Hey I accomplished what I want to do, it works exactly how I want it to. It also degrades gracefuly in craptastic browsers...


<!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=utf-8" />
<title>Medieval Conflicts</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<div class="center">
<div id="head"></div>
</div>
</div>
<div id="body">
<div class="center">
<div id="sub-left"></div>
<div id="main"></div>
<div id="sub-right"></div>
</div>
</div>
<div id="footer">
<div class="center">
<div id="foot"></div>
</div>
</div>
</div>
</body>
</html>


html,body {
margin:0;
padding:0;
height:100%;
background-color:#000000;
background-image:url(images/background.jpg);
background-position:center;
background-repeat:repeat-y;
}
#container {
min-height:100%;
position:relative;
}
#header {
width:100%;
height:133px;
}
#body {
width:100%;
padding-bottom:50px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;
}
.center{
width: 950px;
position: relative;
left: 50%;
margin-left: -475px;
}
#head {
width:950px;
height:133px;
padding:0px;
border:0px;
}
#sub-left {
width:196px;
height:auto;
padding:0px;
padding-bottom:50px;
border:0px;
float:left;
}
#main {
width:554px;
height:auto;
padding:0px;
padding-bottom:50px;
border:0px;
float:left;
}
#sub-right {
width:200px;
height:auto;
padding:0px;
padding-bottom:50px;
border:0px;
float:right;
}
#foot {
width:950px;
height:50px;
padding:0px;
border:0px;
}
.text {
margin:10px;
color:#FFFFFF;
}