CODEWITHSUNDEEP
htmlcsspositionfooter
user1440480
user1440480

Reputation: 419

Footer at the bottom

here's my problem, my footer dont stay at the bottom of the page.

I try anything: clear:boths;bottom:0; margin... nothing is working..

My question is: How can i put it in the bottom of the page.

HERE IS MY CODE

<div id = "wrapper">
       .....
       ....

   <div id = "content2">
    <div id = "fastMenu">
        <a href="conseil-d-administration">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes                    /default/interface/FR/menuAdmin.png'; ?>" border="0" />
        </a>
        <a href="congres-2012">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" />
        </a>
        <a href="formation">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" />
        </a>            
        <a href="devenir-membre">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" />
        </a>            
    </div>  
    <div id="contenu" class="txt">          
        </div>   <?php //CONTENU2 ?>  
      <div id = "leftSide">
        <?php  include_once(INC_PATH_FULL_THEME.'event-teaser.php'); ?>
      </div>          
   </div>  <?php //CONTENT2 ?>   
     <div id = "footer">

       </div>

CSS 

#footer{
width: 900px;
height: 100px;
background:white;
margin-top: 100px;    
bottom: 0;
clear:both;    
 }
  #contenu2{
background:white;
width: 600px;
float:right;
padding-right: 2.5%;
 z-index: 1;
 }
 #content2{
width: 900px;
height: auto;
margin-left: 1px;
background:white;
overflow: auto;
z-index: 1;
position:absolute;
   }

#wrapper{
width:900px;    
align: 26.5%;
margin: 0 auto;
margin-top: 15px;
font-family: "Lucida Sans Unicode", Arial, Verdana;
 }

Upvotes: 0

Views: 4387

Answers (5)

Siva Charan
Siva Charan

Reputation: 18064

Refer this LIVE DEMO

When am formatting your code on jsfiddle, I have come across few issues and fixed those:-

  1. On HTML, closing div is missing
  2. On CSS, removed number 2 from a class "#contenu2" (Now it is "#contenu")
  3. Added position: absolute; to the #footer class

HTML:

<div id="wrapper">
    <div id="content2">
        <div id="fastMenu">
            <a href="conseil-d-administration">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes                    /default/interface/FR/menuAdmin.png'; ?>" border="0" />
            </a>
            <a href="congres-2012">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" />
            </a>
            <a href="formation">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" />
            </a>            
            <a href="devenir-membre">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" />
            </a>            
        </div>  
        <div id="contenu" class="txt">          
        </div>   <?php //CONTENU2 ?>  
        <div id="leftSide">
        <?php  include_once(INC_PATH_FULL_THEME.'event-teaser.php'); ?>
        </div>          
    </div>  <?php //CONTENT2 ?>
    <div id="footer">
        FooterText
    </div>      
</div>
​

CSS:

#footer {
    width: 900px;
    height: 100px;
    background:white;
    margin-top: 100px;    
    bottom: 0;
    clear:both;    
    position: absolute;
}

#contenu {
    background:white;
    width: 600px;
    float:right;
    padding-right: 2.5%;
    z-index: 1;
}

#content2 {
    width: 900px;
    height: auto;
    margin-left: 1px;
    background:white;
    overflow: auto;
    z-index: 1;
    position:absolute;
}

#wrapper{
    width:900px;    
    align: 26.5%;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Lucida Sans Unicode", Arial, Verdana;
}​

Upvotes: 1

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

You must add to your css:

position: relative;

to element which contain footer element.

and of course position: absolute for footer element.

in your case:

#wrapper {
    position: relative;
}

Upvotes: 1

A_nto2
A_nto2

Reputation: 1096

This worked for me. Try to adapt it to your code. Sign as an answer if it's helpful.

html, body {
    margin:0 auto; /* to center page align (can be left, right)*/
    height:100%;
}

#container {  /* contains everything, footer inclusive. */
    min-height:100%; 
    position:relative; 
}

#footer {
    clear: both;  
    position:absolute;
    bottom:0; 
    height:55px; /*Required, Height of the footer */
}

Upvotes: 1

kqualters
kqualters

Reputation: 306

Put "Position:absolute;" in the footer css. JsFiddle http://jsfiddle.net/sdxaZ/

Upvotes: 0

Josh Mein
Josh Mein

Reputation: 28645

If you are wanting your footer to always be at the bottom of the page unless pushed down by content, check out this sticky footer tutorial. The following code should be all you need.

HTML:

<div class="wrapper">
    <div class="header">    
    </div>
    <div class="push"></div>
</div>
<div class="footer">
</div>

CSS:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Upvotes: 1

Related Questions