Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Hello,

    Iíve stumbled upon a little problem that seems to be quite common.

    Basically I require the footer on my website to stay at the bottom of the web browser when itís resized. I can achieve this by the following CSS: Position: absolute; bottom:0;. This puts to footer at the bottom of the browser and moves it when I resize. The problem I canít solve as to do with overlapping. I want the footer to stop moving when it encounters the main div. At the moment it just overlaps everything and the only way I can hide this is by setting the z-index to -1, but the problem with that is it hides the copyright info and a few links that are on the footer.

    A good example of what I want to achieve is on Facebook. Youíll notice the main login page only lets the footer come half way up when you resize the browser window.

    My site isnít online at the moment, Iím working locally, but Iíll post the code should someone want to delve further. Itís not a complicated script, just basic CSS, it has a fixed width of 980px.

    Cheers everyone.

  2.  

  3. #2
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Quote Originally Posted by ABSSolutons
    do you have a <br> in between your footer and other divs?>
    No. The footer is outside the main container so it didn't need one. The main container (div) is 980px wide and it's centred. The footer width is set to 100% so it expands with the browser window.

  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Without seeing the code...have you tried clear: both for the footer?

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Basically it looks like they give the main div (above the footer) a min-height of 100%, and then let the footer flow accordingly. The min-height pushes the footer down as far as possible. I'm not sure if this works in IE -- it's quite possible that they just use `height' there. Interestingly, in Safari, at least, setting `height' to 100% instead of min-height actually lets the footer overlap the div when the window gets too small. This may essentially be a flowing that says `well, there isn't enough room for 100%, so let's let these overlap'.

  6. #5
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Here is the code, CSS ans HTML.
    CSS
    @charset "utf-8";
    /* CSS Document */
    * { margin:0; padding:0;}
    body {
    background-image:url(images/Towers.jpg);
    overflow: visible;
    background-color: #000;
    background-repeat: repeat-x;
    margin:0;
    padding:0;
    height:100%;
    background-color:#000;
    bottom:0



    }
    /*MAIN DIVS*/
    #main {
    margin:0 auto; width:980px; background:#000; position:relative; clear:both;
    }

    #header {
    width: 980px; height: 350px; vertical-align:top;
    }

    .cells { width:100%; height: 100px; background-color:#333; margin: auto 0;
    }
    .cells:hover { background-color:#262626; cursor: pointer;
    }
    .cell_text { width:30%; height:99px; text-align:right; float:right; padding: 0px 0px 0px 0px; margin-right:160px;
    }

    .spacer { width:100%; height:2px; background-color:#000;
    }
    .spacer2 { width:100%; height:2px; background-color:#000;
    }

    #footer { width:100%; position: absolute; bottom:0; background-color:#323132; clear:both;
    }



    /*TEXT FORMAT*/
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    color: #999;
    padding:7px;
    text-indent:30px;
    }
    p:hover { color:#fff; cursor: pointer;}
    .p2 { font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #777;
    text-decoration: none;
    float:left;
    width:300px;
    padding-top:10px;}
    #pcc1 {background-color:#262626; margin-bottom:2px;}
    #pcc2 {background-color:#262626; margin-bottom:2px;}
    #pcc3 {background-color:#262626; margin-bottom:2px;}
    #pcc4 {background-color:#262626; margin-bottom:2px;}
    #pcc5 {background-color:#262626; margin-bottom:2px;}

    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 100;
    color: #999;
    padding: 24px 20px 0px 0px;
    text-align:left
    }
    h1:hover { color:#fff; cursor: pointer;}
    a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #c2c2c2;
    text-decoration: none;
    font-weight:bold;
    }
    a:hover {color:#FFF; }

    /*ALIGNMENT*/
    .submen {float:right; width:50%; height:152px; background-color:#000;}
    /*IMAGE*/


    HTML
    <!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>
    <title> design</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <script src="maxheight.js" type="text/javascript"></script>
    <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
    </head>


    <body>

    <div id="main">
    <div id="header">
    <object id="FlashID" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="350">
    <param name="movie" value="flash/xml-header-menu-2.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash/xml-header-menu-2.swf" width="980" height="350">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>
    </div><!--this is "header" div tag end-->


    <div class="spacer2"></div>


    <!--CELLS START-->
    <div class="cells">
    <div class="cell_text">
    <h1>test test test test test test</h1>
    </div>
    <img src="images/page1_img13.jpg" width="50%" height="100" alt="lukes design" longdesc="http://www " onmouseover= "this.src='images/page1_img13_b.jpg'" onmouseout="this.src='images/page1_img13.jpg'"/></div>

    <div class="spacer"></div>

    <div class="cells">
    <div class="cell_text">
    <h1>test test test test test test.</h1>
    </div>
    <img src="images/page1_img12.png" width="50%" height="100" alt="luke design" longdesc="http://www. " onmouseover= "this.src='images/page1_img12_b.png'" onmouseout="this.src='images/page1_img12.png'"/></div>

    <div class="spacer"></div>
    <!--CELLS FINISH-->

    <div class="submen">
    <p id="pcc1" onmouseover="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#262626';" >test test test test test</p>

    <p id="pcc2" onmouseover="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#262626';" >test test test test test</p>

    <p id="pcc3" onmouseover="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#262626';" >test test test test test</p>

    <p id="pcc4" onmouseover="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#262626';" >test test test test test</p>

    <p id="pcc5" onmouseover="this.style.backgroundColor='#000';" onmouseout="this.style.backgroundColor='#262626';" >test test test testtset</p>
    </div>

    <div class="spacer"></div>


    </div><!--this is "main" div tag end-->

    <div id="footer"><p class="p2" style="cursor:default"> Design &copy; 2009</p><a href="" style="float:right; padding:10px; background-color: #444">Client Login</a></div>

    </div>


    <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    //-->
    </script>

    </body>
    </html>

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You said the footer was outside the main div but I still see a closing div tag after the footer. I can't find its related tag, maybe just extra. Anyway, if you have the footer by itself and clear both, it should not overlap anything. I would question the absolute positioning of that div. If you have it inside the main div,vthen its position will be relative to the bottom of that div and willoverlap the content because of the absolute positioning..

  8. #7
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Quote Originally Posted by aeroweb99
    You said the footer was outside the main div but I still see a closing div tag after the footer. I can't find its related tag, maybe just extra. Anyway, if you have the footer by itself and clear both, it should not overlap anything. I would question the absolute positioning of that div. If you have it inside the main div,vthen its position will be relative to the bottom of that div and willoverlap the content because of the absolute positioning..
    The footer is outside the main div, that closing div tag is just a mistake that should have been deleted. Just above the footer is says </div><!--this is "main" div tag end--> Thatís the closing div for the main container. I know what youíre saying with the absolute positioning of that div, I donít like using absolute but I donít know how to get the footer to stay at the bottom without it. Plus if I put the footer inside the main div Iíll restrict it to the 980 width and I donít want that if possible.

    I know how to stop it overlapping the main div but that requires me losing the absolute position and also the 100% width. :-(

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, give the main div a min-height of 100%. That should do it for the non-IE browsers. Then I think if you add a height of 100% for IEs <7 or possibly <8, then you should be good there, too. Need to double-check that one though.

  10. #9
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Still no luck:-(

    Iíve tried clear:both on the main and the footer and even both together a still no joy. If I take the absolute position away it does not overlap and sits nicely under the main div. However, it does not scale with the browser window and more importantly does not stay at the bottom.

    Best I can do at the moment is to put the z-index to -1 on the footer div. It goes below all the content when I scroll upwards... not ideal but Iím stuck!:ichatsat:

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance you can throw the page up somewhere?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

contents overlap footer in html
,
css absolute stop overlap
,

footer overlapping main content in html print

,
header position fixed overlapping
,
html5 position footer no overlapping
,
insert div bottom
,
overlapping footer and content css html
,

prevent divs from overlapping vertically

,
stop a fixed postion overlapping with footer
,
stop position fixed overlap
Click on a term to search for related topics.
All times are GMT -6. The time now is 05:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com