privacy footer not getting placed at the bottom
Hi,
Please read the post completely to know the problem.
I have designed a web page with 2 column layout in the content section. It has the following structure:
header:
In header I have given topbarMiddle, topbarLeft, topbarRight. The header has a absolute position with top and left offset properties defined as '0'. The height is defined as 125px. A border is given as 5px with a gray color(#d8d8d8) removing bottom border.
An IE hack as below is given because IE doesn't show full width 100% header as I have mentioned width as 99.1%
* html #header{
width: 100%;
}
footer:
Te footer is also styled like the header . In addition I have given a class called "footerWraper" to give an orange border on top.
#footer #footerWraper{
border-top:3px solid #fe8502;
}
Tablist:
For tabs on top I have included them in tabwrapper class.
leftcolumn:
This is the left column.
<b>contentcolumn:</b>
This is the right column. Here is where I have a problem. I have embedded a <b>.privacy</b> class here which puts privacy statement. When I have a scrollable page it takes bottom place. When there is no scroll then it doesn't take the bottom place. Can you please give some help as to how should I take it to bottom in non scrollable pages.
----------------
Here is the stylesheet:
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
font-size:11px;
font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
color:#000000;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
}
#header {
position:absolute;
margin:0;
top:0;
left:0;
display:block;
width: 99.1%;
height:125px;
font-size:4em;
z-index:5;
overflow:hidden;
border:5px solid #d8d8d8;
border-bottom:0px;
}
* html #header{
width: 100%;
}
#header #topbarMiddle{
line-height:75px;
height:75px;
background-color:#004a66;
vertical-align:middle;
color:#a0d967;
padding-left:10px;
font-size:20px;
font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}
#header #topbarLeft{
padding-left:5px;
height:75px !important;
background-image:url(../images/bg/head-top-left.gif);
background-repeat:no-repeat;
background-position:left top;
white-space:nowrap;
border-bottom:1px solid #FFFFFF;
background-color:#d8d8d8;
}
#header #topbarRight{
padding-right:5px;
height:75px !important;
background-image:url(../images/bg/head-top-right.gif);
background-repeat:no-repeat;
background-position:right top;
white-space:nowrap;
background-color:#d8d8d8;
}
#footer {
position:absolute;
margin:0;
bottom:0;
left:0;
display:block;
width:99.1%;
height:38px;
font-size:1em;
z-index:5;
overflow:hidden;
color:#fff;
border:5px solid #d8d8d8;
border-top:0px;
}
* html #footer{
width: 100%;
height:43px;
}
#footer #footerMiddle{
line-height:35px;
height:35px;
background-color:#004a66;
vertical-align:middle;
color:#ffffff;
padding-left:10px;
font-size:12px;
font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}
#footer #footerLeft{
padding-left:5px;
height:35px !important;
background-image:url(../images/bg/footer-bottom-left.gif);
background-repeat:no-repeat;
background-position:left bottom;
white-space:nowrap;
border-top:1px solid #FFFFFF;
background-color:#d8d8d8;
}
#footer #footerRight{
padding-right:5px;
height:35px !important;
background-image:url(../images/bg/footer-bottom-right.gif);
background-repeat:no-repeat;
background-position:right bottom;
white-space:nowrap;
background-color:#d8d8d8;
}
#footer #footerWraper{
border-top:3px solid #fe8502;
}
#contentColumn{
overflow:auto;
position:absolute;
z-index:3;
top:130px;
margin-left:200px;
bottom:43px;
right:0;
background:#ffffff;
border-right:5px solid #d8d8d8;
}
#contentColumn .inner{
padding:10px;
overflow:auto;
}
.privacy{
position:absolute;
margin-top:50px;
display:block;
width:98%;
}
.pageid{
float:left;
width:50%;
}
.footerlogo{
float:right;
}
* html #contentColumn{
top:-1px;
right:0;
bottom:0;
height:100%;
max-height:100%;
width:100%;
overflow:auto;
overflow-x:hidden;
position:absolute;
z-index:3;
border-top:125px solid #fff;
border-bottom:43px solid #fff;
border-left:200px solid #fff;
}
#leftColumn{
position:absolute;
left:0;
top:130px;
bottom:43px;
width:200px;
background:#ffffff;
z-index:4;
overflow:auto;
border-left:5px solid #d8d8d8;
border-right:1px dashed #d8d8d8;
}
* html #leftColumn{
height:100%;
top:0;
bottom:0;
border-top:125px solid #fff;
border-bottom:43px solid #fff;
color:#000000;
}
#leftColumn .inner{
padding:10px;
}
#leftColumn h1{
COLOR:#A0D967;
padding: 4px 10px;
background-color:#004A66;
}
#leftColumn p{
background-color:#eeeeee;
padding: 10px 10px;
margin-top:0px;
}
.contentTopBar{
padding-bottom:5px;
}
/* TABS */
#tabWraper{
padding-top:10px;
border-top:3px solid #fe8502;
}
* html #tabWraper{
padding-top:0px;
}
#tabList{
padding: 3px 0;
padding-left:200px;
margin-left: 0;
border-bottom: 1px solid #6e6e78;
font: bold 12px Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}
#tabList li{
list-style: none;
margin: 0;
display: inline;
}
#tabList li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #6e6e78;
border-bottom: none;
background: #eeeeee;
text-decoration: none;
color: #6e6e78;
}
#tabList li a:link {
color: #6e6e78;
}
#tabList li a:hover{
color: #a0a0a4;
}
#tabList li a#selected{
background: #ffffff;
border-bottom: 1px solid #ffffff;
}
Shivanand
__________________
Shivanand
|
Linear Mode
