#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    14
    Rep Power
    0

    [Solved] Footer won't float to bottom of extended txt


    I am trying to build a simple layout, I am new at this.
    I want to use CSS to layout my page at top the header, holding my site title and the menu below the main text of the page. On some pages it may be long and the client will need to scroll to finish reading the text. Below this I would like the footer section. On one page the text may be long, on the next page the text may be quite short. I want the footer on below the text with about 15px of white space below the footer. If the text is short I would like the footer about 15px above the bottom of the screen. I searched google sticky footer won't work.

    Code:
    <style>
    html,body, pg_layout
    {
        height:100%;
        min-height:100%;
        margin: 0px;
        padding: 0px;
        position: relative;
    }
    .pg_layout
    {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .pg_banner /* this is for my Header section of the page */ 
    {
       position: absolute;
       top: 5%;
       left: 5%;
       height: 10%;
       width: 90%;
       background-color: #81C1D3;
    }
    .pg_main  /* Main section of page holding long or short text */
    {
       position: absolute;
       top: 20%;
       left: 10%;
       padding-left: 5px;
       padding-right: 5px;
       width: 80%;
       background-color: #EBF1F3; 
    }
    .footer /* footer */
    {
        position: absolute;
        bottom: -50px;
        padding-bottom: 20px;
        text-align: center;
        width: 90%;
        left: 5%;
    }
    </style>
    above is the CSS below is the HTML. I have tried sticky footer and heaps of other things. I have tried placing the footer div below the main div but then on the longer text the footer cannot be viewed at all. What am I doing wrong?

    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>First NetBeans File</title>	
     
        <link rel="stylesheet" href="css/style1.css">
     
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
     
        <noscript>
        <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css">
        <![endif]-->
        </noscript>
     
        </head>
        <body>
            <div class="pg_layout">&nbsp;</div>
            <div class="pg_banner">&nbsp;</div>
            <div class="pg_main">
     
                 <?php
                $mainTxt = "Ipsum/LoremIpsum.txt";
     
                for($x=0;$x<4;$x++)            
                    if (file_exists($mainTxt)) 
                    {
                        $myfile = file_get_contents($mainTxt);    							
                    echo "<div>".$myfile."</div>"; 
                    } 
                    else 
                    {
                        echo "The file $mainTxt does not exist, please forgive me and if you report this error I'll fix it. ";
                    }   
            ?>
     
                <div class="footer"> 
                    <?php
                        $ftrTxt = "text/footer.txt";
     
                        if (file_exists($ftrTxt)) 
                        {
                            $myfile = file_get_contents($ftrTxt);    							
                        echo $myfile;
                        } 
                        else 
                        {
                            echo "The file $ftrTxt does not exist, please forgive me and if you report this error I'll fix it. ";
                        }
                    ?>  
                </div><!-- END Div footer -->
     
            </div><!-- End Main Div -->
        </body>
    </html>
    http://wyght.com/grief/

    the above is long text below shows short text

    http://wyght.com/grief/short_txt.php

    here is the URL with the footer below the "main" div rather than in that div.

    http://wyght.com/grief/footer_out.php

    The footer is at the bottom of the screen just below because the CSS is the same, meaning its still "bottom: -15px" and "padding-bottom: 20px" HTML code snippet below

    Code:
    <div class="pg_main">
                
                 <?php
                $mainTxt = "Ipsum/LoremIpsum.txt";
                
                for($x=0;$x<4;$x++)            
                    if (file_exists($mainTxt)) 
                    {
                        $myfile = file_get_contents($mainTxt);    							
                    echo "<div>".$myfile."</div>"; 
                    } 
                    else 
                    {
                        echo "The file $mainTxt does not exist, please forgive me and if you report this error I'll fix it. ";
                    }   
            ?>
                
            </div><!-- End Main Div -->
            
            
             <div class="footer"> 
                    <?php
                        $ftrTxt = "text/footer.txt";
    
                        if (file_exists($ftrTxt)) 
                        {
                            $myfile = file_get_contents($ftrTxt);    							
                        echo $myfile;
                        } 
                        else 
                        {
                            echo "The file $ftrTxt does not exist, please forgive me and if you report this error I'll fix it. ";
                        }
                    ?>  
                </div><!-- END Div footer -->
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    14
    Rep Power
    0

    I was shown how to do it.


    http://gtwebdev.com/workshop/layout/footer-bottom.php

    He showed me how to do it. This works great and just as I wanted it to. I am still trying to learn how and why it works.

IMN logo majestic logo threadwatch logo seochat tools logo