2 replies [Last post]
faz9
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

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.

faz9
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-03-07
Posts: 14
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 31 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

that would do

Smile that would do it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.