CODEWITHSUNDEEP
htmlcssfooter
william
william

Reputation: 113

CSS footer is not at the bottom (not valid position absolute or fixed)

I want to divide my page in 3 sections (header, content, footer). The problem is that the footer is not at the bottom as it should be, it is at the middle of the page. What am I doing wrong?

#page{
     margin: 0 auto;
           
    }
    
    html{ height:100%;
          margin:0;
      padding:0;}
    
    body{
        height:100%;
        margin:0;
        padding:0;
        background:#FFF;
        font-family: verdana;
        background-color: white;
    }
    
    
    #header{
         top: 0px;
    	width: 100%;
    	height:2.5em;
    	border-bottom: 1px solid rgba(168, 164, 164, 1); 
         background-color: #FAF0E6;
    }
    
    #content{ a
        
    	
    	 width: 100%;
    	 height:100%; 
            text-align: center;
       
    }
    
    
    #formulario{
        width:48em;
        
        margin-top:2em ;
        margin-right: auto;
        margin-left:auto;
       
     
    }
    
    #footer{
        
            margin-top:2em;
            margin-bottom: 0px; 
            bottom:0em;
            
         
            font-size: 1em;
            font-family: "lucida grande";
            text-align: center;
            
            
    	width: 100%;
    	height:1.5em;
            background-color: #D0F5A9;   
            
    }
<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
     <div id="page">
     <div id="header">
     hi
    </div>
     <div id="content">
     <div id="formulario" >hi
     </div>
</div>
     <div id="footer">
    hi</div>
    
    </div>
    </body>`enter code here`
    </html>`enter code here`
Thanks for your help

Upvotes: 1

Views: 440

Answers (4)

Weafs.py
Weafs.py

Reputation: 22992

I would recommend you to use class instead of id for the best practice because id can only be used once but you could use class multiple times. You could do it like this:

Demo on Fiddle[Edited]

Have a look at this Fiddle too.

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    font-family: verdana;
    background-color: white;
    background: #FFF;
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    background-color: #FAF0E6;
    position: relative;
    width: 100%;
    height: 2.5em;
    border-bottom: 1px solid rgba(168, 164, 164, 1);
}
.content {
    position: relative;
    width: 100%;
    min-height: 100%;
    text-align: center;
    margin-top: -2.5em;
    margin-bottom: -1.5em;
    padding-top: 2.5em;
    padding-bottom: 1.5em;
}
.formulario {
    width: 48em;
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
}
.footer {
    background-color: #D0F5A9;
    position: relative;
    width: 100%;
    height: 1.5em;
    font-family:"lucida grande";
    font-size: 1em;
    text-align: center;
}
<div class="header">hi</div>
<div class="content">
    <div class="formulario">HI!</div>
</div>
<div class="footer">hi</div>

Upvotes: 1

muhammad tayyab
muhammad tayyab

Reputation: 810

You need add positionattribute inside footer id and set it to absolute. You didn't mention the position of the footer that's why it was in the middle.

like that

#footer{

    margin-top:2em;
    margin-bottom: 0px; 
    bottom:0em;
    position:absolute;

    font-size: 1em;
    font-family: "lucida grande";
    text-align: center;


width: 100%;
height:1.5em;
    background-color: #D0F5A9;

}

#page{
     margin: 0 auto;
           
    }
    
    html{ height:100%;
          margin:0;
      padding:0;}
    
    body{
        height:100%;
        margin:0;
        padding:0;
        background:#FFF;
        font-family: verdana;
        background-color: white;
    }
    
    
    #header{
         top: 0px;
    	width: 100%;
    	height:2.5em;
    	border-bottom: 1px solid rgba(168, 164, 164, 1); 
         background-color: #FAF0E6;
    }
    
    #content{ a
        
    	
    	 width: 100%;
    	 height:100%; 
            text-align: center;
       
    }
    
    
    #formulario{
        width:48em;
        
        margin-top:2em ;
        margin-right: auto;
        margin-left:auto;
       
     
    }
    
    #footer{
        
            margin-top:2em;
            margin-bottom: 0px; 
            bottom:0em;
            
         
            font-size: 1em;
            font-family: "lucida grande";
            text-align: center;
            
            
    	width: 100%;
    	height:1.5em;

        position:absolute;

            background-color: #D0F5A9;   
            
    }
<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
     <div id="page">
     <div id="header">
     hi
    </div>
     <div id="content">
A
A
A
A
A
v
A

     <div id="formulario" >hi
     </div>
</div>
     <div id="footer">
    This is footer</div>
    
    </div>
    </body>
    </html>

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

There are two things need to be noticed:

  1. The footer DIV shouldn't is a child node of content DIV. Because the footer is sibling to the header.

  2. After change the footer of DOM position.Both of position:fixed;bottom:0; and position: absolute; bottom:0; is fit for your situation.

This is My JSFiddle.

Upvotes: 0

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

#page{
 margin: 0 auto;

}

html{ height:100%;
      margin:0;
  padding:0;}

body{
    height:100%;
    margin:0;
    padding:0;
    background:#FFF;
    font-family: verdana;
    background-color: white;
}


#header{
     top: 0px;
    width: 100%;
    height:2.5em;
    border-bottom: 1px solid rgba(168, 164, 164, 1); 
     background-color: #FAF0E6;
}

#content{ a


     width: 100%;
     height:100%; 
        text-align: center;

}


#formulario{
    width:48em;

    margin-top:2em ;
    margin-right: auto;
    margin-left:auto;


}

#footer{

        margin-top:2em;
        margin-bottom: 0px; 
        bottom:0em;
position:absolute;

        font-size: 1em;
        font-family: "lucida grande";
        text-align: center;


    width: 100%;
    height:1.5em;
        background-color: #D0F5A9;   

}
<body>

 <div id="page">
 <div id="header">
 hi
</div>
 <div id="content">
 <div id="formulario" >hi
 </div>
 <div id="footer">
hi</div>
</div>
</div>
</body>
You should use position:absolute; for your footer

Upvotes: 0

Related Questions