11 Replies Latest reply on Sep 19, 2007 3:44 AM by yevri

    div to bottom of content to browser bottom

    yevri Level 1
      I want to have a div at the bottom (footer) of my content area on the page that will stretch to the bottom of the browser window when there is very little content in the content divs above it, and if there is a lot of content, it gets pushed down and when they scroll, it's still at the bottom of the content reaching the bottom of the browser window. Does this make sense? Basically, it'll be a color block below the content, with some links and possibly a background image that repeats x.

      Here is the current code and I want to add a div below the content area that's in a Dreamweaver template:


      <body background id = "background" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
      <div id = "all"><div id="logo">
      <p><img src="../images/logo.png" alt="Alain Locke Logo" width="222" height="188" /></p>
      <div id="left_nav">
      <p><a href="../calendar.html">Calendar</a></p>
      <p><a href="../events.html">Special Events</a></p>
      <p><a href="../teachers.html">Teachers</a></p>
      <p><a href="../parents.html">Parents</a></p>
      <p><a href="../family_resource_learning_center.html">Family Resource &amp; Learning Center</a></p>
      <p><a href="../community_resource.html">Community Resourrce</a></p>
      <p><a href="../news.html">In the News</a> </p>
      </div>
      <p>  </p>
      </div>
      <div id="header">Alain Locke Charter Academy</div>
      <div id="nav"><a href="../index.html">Home</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../about_alain_locke.html">About Alain Locke</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../admissions.html">Admissions</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../academics.html">Academics</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../support_alain_locke.html">Support Us</a> </div>
      <div id="content"><!-- TemplateBeginEditable name="Content" -->Content for id "content" Goes Here<!-- TemplateEndEditable --></div>
      </div>

      </body>
        • 1. Re: div to bottom of content to browser bottom
          jordydme
          Not exactly sure what you are after but this may help you. I believe you may want to experiment with a fixed position div. Take a look at the code I threw together in DW. Copy and paste it into DW and then apply the concept to your page if it is helpful. I do believe you are calling your div wrapper "all". My example does not have a wrapper so the fixed position footer div is referencing it's position from the body tag or the view port . "0" is the number I used in the embedded CSS style sheet. Hope this is helpful. I am not an expert.

          Joryd


          • 2. Re: div to bottom of content to browser bottom
            Level 7
            On Wed, 12 Sep 2007 01:31:14 +0000 (UTC), "yevri"
            <webforumsuser@macromedia.com> wrote:

            >I want to have a div at the bottom of my content area on the page that will
            >stretch to the bottom of the browser window when there is very little content
            >in the content divs above it, and if there is a lot of content, it gets pushed
            >down and when the scroll, it's still at the bottom reaching the bottom of the
            >browser window. Does this make sense?

            Yes, but I don't think it is possible. You either have something to
            fill the space to push this footer to the bottom or you don't.

            > Basically, it'll be a color block below
            >the content, with some links and possibly a background image that repeats x.
            • 3. Re: div to bottom of content to browser bottom
              Level 7
              On Wed, 12 Sep 2007 07:04:55 +0000 (UTC), "jordydme"
              <webforumsuser@macromedia.com> wrote:

              >Not exactly sure what you are after but this may help you. I believe you may
              >want to experiment with a fixed position div. Take a look at the code I threw
              >together in DW. Copy and paste it into DW and then apply the concept to your
              >page if it is helpful. I do believe you are calling your div wrapper "all". My
              >example does not have a wrapper so the fixed position footer div is referencing
              >it's position from the body tag or the view port . "0" is the number I used in
              >the embedded CSS style sheet. Hope this is helpful. I am not an expert.
              >
              > Joryd
              >
              >
              >
              >
              > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              >" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              > <html xmlns=" http://www.w3.org/1999/xhtml">
              > <head>
              > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              > <title>Untitled Document</title>
              > <style type="text/css">
              > <!--
              > #footer {
              > position: fixed;
              > bottom: 0px;
              > background-color: #00CC99;
              > }

              Remove most of the content and this footer moves up. This is not fixed
              position. It must be fixed to the left and top, not the bottom.
              • 4. Re: div to bottom of content to browser bottom
                L._Simon
                I'm at work, so I can't write and test the code, but this should be do-able in javascript. Basically, you'll need a function that checks if the height of the content window is less than the height of the screen, and assigns a height to that div that sits the footer at the bottom of the window.

                You might be able to do it in PHP as well, though I'm not as well versed in that language. If you can test for the calculated height of the div, you can do it.
                • 5. Re: div to bottom of content to browser bottom
                  Level 7
                  On Wed, 12 Sep 2007 13:39:32 +0000 (UTC), "L. Simon"
                  <webforumsuser@macromedia.com> wrote:

                  >I'm at work, so I can't write and test the code, but this should be do-able in
                  >javascript. Basically, you'll need a function that checks if the height of the
                  >content window is less than the height of the screen, and assigns a height to
                  >that div that sits the footer at the bottom of the window.
                  >
                  > You might be able to do it in PHP as well, though I'm not as well versed in
                  >that language. If you can test for the calculated height of the div, you can
                  >do it.

                  That sounds great! I'm not smart enough to do it, but would sure like
                  to see the code. :P
                  • 6. Re: div to bottom of content to browser bottom
                    zero9ine
                    quote:

                    Originally posted by: yevri
                    I want to have a div at the bottom (footer) of my content area on the page that will stretch to the bottom of the browser window when there is very little content in the content divs above it, and if there is a lot of content, it gets pushed down and when they scroll, it's still at the bottom of the content reaching the bottom of the browser window. Does this make sense? Basically, it'll be a color block below the content, with some links and possibly a background image that repeats x.



                    Like this? http://ryanfait.com/sticky-footer/

                    Doesn't require JavaScript to do just CSS styling.
                    • 7. Re: div to bottom of content to browser bottom
                      Level 7
                      On Thu, 13 Sep 2007 03:28:28 +0000 (UTC), "zero9ine"
                      <webforumsuser@macromedia.com> wrote:

                      > Like this? http://ryanfait.com/sticky-footer/
                      >
                      > Doesn't require JavaScript to do just CSS styling.

                      Wow, thanks! It's nice to be wrong sometimes.

                      By the way, it all validates.
                      • 8. Re: div to bottom of content to browser bottom
                        yevri Level 1
                        Sorry for being MIA - I thought I had subscribed but didn't get any emails saying there were replies.

                        Thanks - The sticky footer is exactly what I'm trying to do. I'll check it out more and let you know how it turns out.
                        • 9. Re: div to bottom of content to browser bottom
                          yevri Level 1
                          I tried the Sticky Footer and am having some issues, probably due to my code (pasted below).

                          1. The footer pushes up to above my content div unless I clear floats. And it won't stick to the bottom either way.

                          2. My left side links lose their vertical spacing. I tried adding padding (and margin) and that made no difference.



                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html xmlns=" http://www.w3.org/1999/xhtml">
                          <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                          <!-- TemplateBeginEditable name="doctitle" -->
                          <title>Alain Locke Charter Academy</title>
                          <!-- TemplateEndEditable -->
                          <link href="../style.css" rel="stylesheet" type="text/css" />
                          <!--[if lt IE 7.]>
                          <script defer type="text/javascript" src="pngfix.js"></script>
                          <![endif]-->
                          <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
                          </head>

                          <body background id = "background" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
                          <div id = "all"><div id="logo">
                          <p><img src="../images/logo.png" alt="Alain Locke Logo" width="222" height="188" /></p>
                          <div id="left_nav">
                          <p><a href="../calendar.html">Calendar</a></p>
                          <p><a href="../events.html">Special Events</a></p>
                          <p><a href="../teachers.html">Teachers</a></p>
                          <p><a href="../parents.html">Parents</a></p>
                          <p><a href="../family_resource_learning_center.html">Family Resource &amp; Learning Center</a></p>
                          <p><a href="../community_resource.html">Community Resourrce</a></p>
                          <p><a href="../news.html">In the News</a> </p>
                          </div>
                          <p>  </p>
                          </div>
                          <div id="header">Alain Locke Charter Academy</div>
                          <div id="nav"><a href="../index.html">Home</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../about_alain_locke.html">About Alain Locke</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../admissions.html">Admissions</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../academics.html">Academics</a> <img src="../images/bullet.jpg" width="4" height="4" /> <a href="../support_alain_locke.html">Support Us</a> </div>
                          <div id="content"><!-- TemplateBeginEditable name="Content" -->
                          <p>This is content area. It's in an editable region of this template. </p>
                          <p> </p>
                          <p> </p>
                          <p>I have a wrapper div named all - and other divs in there. Since I have the logo breaking the bounds of the top banner on the left side, just above the left side nav, I made those float left. </p>
                          <p> </p>
                          <p>The main issue I'm having is making the footer stay on the bottom of the browser. This sticky footer seems promising, but not working for me yet.</p>
                          <p> </p>
                          <p>I need to try it all over again and see what happens. One other thing I noticed, after I added the sticky footer style stuff to my style sheet, my left side nav text is vertically on top of each other instead of spaced nicely like I had them. I don't see p tags in the style code I copied over. Not sur why that is happening. </p>
                          <p> </p>
                          <p>And the footer is not pushing down like it should. Float. </p>
                          <p> </p>
                          <p>Testing.</p>
                          <p> </p>
                          <p>Testing.</p>
                          <p> </p>
                          <p>Testing.</p>
                          <p> </p>
                          <p>Testing.</p>
                          <p> </p>
                          <p>Testing.</p>
                          <p> </p>
                          <p> </p>
                          <!-- TemplateEndEditable --></div>
                          <div class="push"></div>
                          </div>

                          <div id="footer">
                          <div align="center">Content for id "footer" Goes Here</div>
                          </div>
                          </body>
                          </html>
                          • 10. Re: div to bottom of content to browser bottom
                            yevri Level 1
                            I gave up on the Sticky Footer. I figured that I should be able to create a div for the background and inside that a div wrapper and put two divs in there, left and right, left will hold the logo and left-side nav, right will hold the rest of the header area, which includes a text bit and a nav div, and the content div below that. Then below the left and right divs I want the footer div. I want the color of the footer to be the same down to the bottom of the browser window, so I made the body background that color, made a div called background and made it's background white and put a x repeating image for the header in that and put all the other divs except the footer into that div.

                            The problem is, the content div (which is inside the right div) goes over the footer div even though I have made the footer div clear both. I'm pretty new to CSS layout and am doing something wrong. What is it?

                            Here is the DWT file with the divs:
                            http://www.celestiacorp.com/alca/Templates/main.dwt

                            Here is the stylesheet file:
                            http://www.celestiacorp.com/alca/style.css
                            • 11. Re: div to bottom of content to browser bottom
                              yevri Level 1
                              Just noticed that when I view it in IE 6 on windows, it is fine. It's also fine in the Dreamweaver design mode view, but when I look at the page in Safari 3.03 or Firefox Mac 2.x, the content goes over the footer.

                              Can you see why this would be?