CODEWITHSUNDEEP
htmlcss
neel
neel

Reputation: 5293

Position of footer can't fixed

http://jsfiddle.net/L9tqk/2/

i cant place my footer in correct place

<div id="logo"></div>
<div id="content">
    <div id="trans">
    <div id="data">
        <div id="left"> </div>
        <div id="right"> </div>
    </div>
 </div>
 <div id="footer"></div>


#footer {
 position:relative;
 width:100%;
 clear:both; 
}

when give 

 bottom:0;

to #footer normal window it placed correctly, but when window size is changed, the footer position is not correct.

Upvotes: 2

Views: 87

Answers (7)

Venkat Reddy
Venkat Reddy

Reputation: 49

try this 

#footer {
  position:absolute;
  width:100%;
  clear:both;
  bottom:0;
}

Upvotes: 1

Karuppiah RK
Karuppiah RK

Reputation: 3964

Final correct answer : http://jsfiddle.net/L9tqk/11/

 change `position: absolute;` to `position: relative;` and
    overflow: hidden; add in your `#content #trans`

Upvotes: 1

user3117841
user3117841

Reputation: 

#content #trans {
    background: rgba(0,0,0,0.3);
    width:100%;
    height:auto;
    float:left;
    top:0px;  
    left:0px;  
    z-index:-1;
    border-radius:5px;
    color:Red;
   }

OR

#footer {
 position:fixed;
    bottom:0;
  width:100%;
  clear:both; 
}

Upvotes: 1

sush
sush

Reputation: 379

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

This works for almost all web browsers. It remains fixed and all other contents will be behind it.

Upvotes: 0

Mohsen Safari
Mohsen Safari

Reputation: 6795

remove position:absolute; from #content #trans and set float to it:

DEMO

#content #trans {
    background: rgba(0,0,0,0.3);
    width:100%;
    height:auto;
    float:left;
    border-radius:5px;
    color:Red;
   }

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Give fixed position to footer.

#footer{
    position:fixed;
}

Demo here.

OR:

Give hidden overflow to #content #trans.

Write:

#content #trans{
    overflow:hidden;
}

DEMO here.

Upvotes: 1

Lakshmi
Lakshmi

Reputation: 2294

Change this Css position to relative and it works 

#content #trans {
    background: rgba(0,0,0,0.3);
    width:100%;
    height:auto;
    position:relative;  
    top:0px;  
    left:0px;  
    z-index:-1;
    border-radius:5px;
    color:Red;
   }

The updated fiddle

http://jsfiddle.net/L9tqk/9/

Upvotes: 0

Related Questions