Ok, so I found a 2col+header+footer+100% height template here last night (which I currently can no longer find). Anyway, that version had a specifc pixel size and I wanted it to fill the page so I played around with it and finally got it working fine.
So today I start adding content to it and I noticed that if I add enough content so that it pushes the page off the bottom of the screen a small, 18px, gap apears under the footer and I just cant seem to fix it. This is only a problem in firefox though
Here's the css
/*** Style for LSB 2 Column Template ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
html,body{height:100%}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#F2F6F9; /*** Background colour of page ***/
min-width:775px; /*** Content Width ***/
text-align:center;
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0p
x}
.floatcontainer{display: inline-table;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:100%; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-20px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background:#FFCCCC; /*** Background colour of left column. Also has the left hand side shady
border image ***/
}
#wrapper{
display:table-cell;
position:relative;
}
* html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as
that). ***/
border:none;
}
#outer{
position:relative;
margin-left:200px; /*** Left Column Width ***/
/*** Center Column Width (takes into account left shady border width) ***/
background:#ADD8E6; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
/*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
/*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
width:100%;
}
#left{
float:left;
display:inline;
width:200px; /*** Left Column Width ***/
margin-left:-200px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#clearheadercenter{
height:156px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:156px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:100%; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subfooter1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:20px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:100%; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:156px;
overflow:hidden;
}
#container-left{}
#container-center{
text-align: left;
}
And here's the html
Your Page Title Here
This is the
Main Contentccccccccccccccccccccccccccccccccccccsd
ds
ds
ds
sdds
sd
sd
sdsd
sd
sd
ds
sd
sd
ds
s
d
dss
sa
sa
sa
sa
sasa
sa
sa
sas
a
sa
sa
sa
sa
This is the Left Sidebar
This is Sub-Header #1 (with Fixed Height)
Can anyone see what I'm doing wrong?
It seems that when ever I finally fix it it infact breaks it when there isn't enough content to push it down the page.
Ha. Fixed. If anyone cares
Ha. Fixed. If anyone cares what the problem was it was a simple return in the middle of a line of code.
Changing this
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0p x}
to this
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
Solved the problem.
that would do
that would do it.
cheers,
gary