WordPress.org

1. Mikado_tee
   Member
   Posted 4 years ago #
   

   Hello all,

   I use the theme neongrow on the site I am working on. The footer is at the bottom of the page.
   But when I need to scroll the footer don't stay below the content, it ends in the middle of the browser window.

   I have tried with position:relative in content, and positon: fixed for footer, but then the content ends up in Explorer to the right. But works in Firefox.

   So...HELP!

   I figured out it problem is in the layout css:

   #wrapper{
   width: 100%;
   margin: 0 auto 0 auto;
   text-align: left;outline:none
   font: normal 1.2em Verdana, Arial;
   }
   
   #header{
   float: left;
   margin: 1em 2% 0 2%;
   padding: 0 0 0 5% ;
   width: 91%;
   height: 140px;
   text-align: left;
   text-decoration: none; outline:none;
   color: #000000;
   border-bottom: 3px solid #004466;
   }
   
   #content{
   float: left;
   clear: both;
   position: absolute;
   width: 70%; height: auto;
   margin: 125px 0 0 1%;
   padding: 0 3% 0 1%;}
   
   .sidebar{
   float: right;
   width: 20%;
   margin: 1% 1% 0 1%;
   /* fix IE margin bug */
   display: inline;
   }
   
   #footer{
   position: fixed;
   bottom: 0px;
   clear: both;
   float: left;
   width: 100%;
   margin: 0%;
   padding: 10px;
   text-align: center;
   background: #ffffff;
   border-top: 3px solid #004466;
   }
   
   #logo {
   position: absolute;
   top: 25px;
   right: 70px;   }

2. rogeriomello
   Member
   Posted 4 years ago #
   

   Have you tried using "position: absolute" instead of fixed on the footer?
   It might work... ;^)

   Good luck... 8^)

3. Mikado_tee
   Member
   Posted 4 years ago #
   

   Hello,

   No help here, so I used all my brainpower and found this soloution:

   #wrapper{
   width: 100%;
   margin: 0 auto 0 auto;
   text-align: left; outline:none;
   font: normal 1.2em Verdana, Arial;
   }
   
   #header{
   position:relative;
   float: left;
   margin: 1em 2% 0 2%;
   width: 91%;
   height: 110px;
   text-decoration: none;
   color: #000000;
   border-bottom: 31px solid #004466;
   }
   
   #content{
   float: left;
   width: 80%;
   margin: 5px;
   padding: 10px;}
   
   .sidebar{
   float: right;
   width: auto;
   margin:2% 1% 5% 0;
   /* fix IE margin bug */
   display: inline;
   }
   
   #logo {
   float:right;
   top: 25px;
   right: 70px;   }
   
   #footer{
   clear: both;
   width: 98%;
   margin: 5% 0 0 0;
   padding-top: 15px;
   border-top: 3px solid #004466;
   }

Topic Closed

This topic has been closed to new replies.