View Single Post
  #1 (permalink)  
Old July 6th, 2007, 02:31 AM
Cyber Shiva Cyber Shiva is offline
Authorized User
 
Join Date: Feb 2007
Location: Hyderabad, Andhra Pradesh, India.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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
Reply With Quote