Solved

CSS DIV (Footer) will not stay at the bottom.

Posted on 2013-01-28
19
409 Views
Last Modified: 2013-01-30
Hello All;

I am having a CSS issue with my bottom FOOTER DIV
(This page was just copied from source, from the live view, and everything that was not needed, was stripped out, so that everyone could assist without going through a bunch of messy code.)

Now, the page was originally designed with <tables>
And the Hide/Show action, is using the <tbody>

I have since re-done the site, and it is done with DIV's
However, there are certain area's of the site, that are still Table made, and will stay that way. For the time being at least.

When you expand the following
"Arms and upper Body"
and
"Hammer Strength"

It covers the FOOTER Div.


Google Chrome Issue, Does not Affect IE9, IE8, IE7
If you make the browser window shorter in Height.
To where the "Footer" goes over the links, it renders them un-clickable.


Can someone please help me in getting the Footer Div, to stay at the bottom?
Link Here
http://www.stayinshape.us/test/Main3.htm

Thank you
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 11
  • 6
  • 2
19 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38827799
The page is broken because there is no natural flow. There are us a bunch of disconnected pieces as a result of all the absolute positioning.  That is not layout, that is drawing.  You can probably get the footer to the bottom of the viewport by changing it from position:absolute to position:fixed. Not the best approach, but with a broken page, extreme measures are sometimes necessary.

However you are going to find it impossible to do much with a page where almost everything has position:absolute applied.  The way to do this is to allow the elements to position naturally and then us margins, padding and floats to modify positioning.  That maintains flow allows the elements to interact.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38828887
You try something, and think you are doing it right, and then you find out that it is all screwed up.
Da**, should have never changed my page layout to begin with, should have just kept the Table layout and waited until I had the time to mess with converting over to DIV's.

Well, at least I do have a backup of the original, as it seems that I might have to convert back to using it, as this is something that is going to take longer to LEARN, than I have time to do at this moment.

Thanks cobo for your info, though it does nothing for me at this moment, just sort of brings me down, knowing that I have spent to much time doing something that is messed up.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38828942
Learning from mistakes is still learning.

I generally learn a lot more by blowing things up then I do from the stuff that just works smoothly right off.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38829029
Right now I am looking at another code, that shows the div aligned bottom, and it works when i put my content in it.
So, i just have to implement that same technique into my project, or at least get it working in this one that I have here, and then go from there.

http://www.webmasterworld.com/forum83/501.htm
Scroll down to: SuzyUK
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38829328
Here's a quick solution for you:
#Footer {
        width: 100%;
        margin: 0%;
	bottom:0%;
	height:163px;
        text-align:center;
	z-index:7;
}

Open in new window

Replace your footer style with the one I provided.

the rest of the solution is to take out most of the "Absolutes" and then the footer will work properly.
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38829357
If you really don't want to take out the absolutes, I created this solution for you...

HTML + CSS Page based on [View Source] of the page you showed in your first post:

<!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>Some title here</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <style type="text/css">
<!--


* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}


#wrapper {
 width: 960px; 
 margin: 0 auto; 
 position:relative;
 min-height:100%;
 }

#Bodycontainer{
	width:100%;
	padding-bottom:163px;
	height:100%;

}
#Footer {
        width: 100%;
        margin: 0%;
	bottom:0%;
	height:163px;
        text-align:center;
	z-index:7;
}
#TopLeft {
	position:absolute;
	width:513px;
	height:50px;
	z-index:1;
	left: 10px;
	top: 43px;
	border:1px double #000;
}
#LogDiv {
	position:absolute;
	left:10px;
	top:104px;
	width:513px;
	height:50px;
	z-index:5;
	border: 1px double #000;
}
#TopRight {
	position:absolute;
	width:513px;
	height:120px;
	z-index:1;
	left: 539px;
	top: 43px;
	border:1px double #000;
}


#CenDiv {
	position:absolute;
	width:517px;
	height:286px;
	z-index:1;
	left: 544px;
	top: 561px;
	border:1px double #000;
}
#NewsInfo {
	position:absolute;
	left:15px;
	top:561px;
	width:513px;
	z-index:2;
	border:1px double #000;
	height: 286px;
	overflow: scroll;
}
#News {
	position:absolute;
	left:15px;
	top:175px;
	width:513px;
	z-index:2;
	border:1px double #000;
	height: 286px;
}
#Header {
	position:absolute;
	left:12px;
	top:3px;
	width:1040px;
	height:34px;
	z-index:3;
}
#Twitter {
	position:absolute;
	left:811px;
	top:175px;
	width:230px;
	height:286px;
	z-index:4;
	border: 1px double #000;
	padding-left: 20px;
}

ul{
	list-style-type:none;
	padding-top:5px;
}
li{
	float:left;
	
}
ul a{
	display:block;
	padding-right:5px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:13px;
	color:#666;
}
#EventDiv {
	position:absolute;
	left:547px;
	top:175px;
	width:230px;
	height:286px;
	z-index:4;
	border: 1px double #000;
}
.events{
border-bottom:1px #dedede dashed; 
padding:8px;
list-style-type:none;
}

@media only screen and (max-width: 1280px){
	#Header{
	width:900px;
}
}
@media only screen and (max-width: 1024px){
#Bodycontainer{
	width:60%;

}


#CenDiv{
	width:475px;
	left:455px;
}

#EventDiv{
left:455px;	
}
#TopRight{
	left:455px;
}
#Twitter{
	left:720px;
}
#TopLeft, #LogDiv, #News, #NewsInfo{
	width:420px;
}
#NewsInfo{
	width:450px;
}
#CenDiv{
	left:480px;
}
#CenDiv, #NewsInfo{
	top:600px;
}
#Footer{
	top:900px;
}
#Ads{
	width:800px;
	left:200px;
}
.LogoAds{
 width:500px;
 
}
#Header{
	width:700px;
}
}
@media only screen and (max-width: 800px){
		.LogoAds{
	     width:408px;
}
#Adds {
	width:966px;
}
}
@media only screen and (max-width: 640px){
	.LogoAds{
	width:408px;
}
}

#InnerContainer {
	position:absolute;
	left:210px;
	top:40px;
	width:743px;
	height:430px;
	z-index:1;
}
-->
</style>
    <style type="text/css">
        .EquipTD
        {
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 50px;
        }
        .MainEquip
        {
            text-align: center;
            font-size: 22px;
            color: #666;
        }
        #FreeTD
        {
            width: 500px;
        }
    </style>
    <style type="text/css">
        /*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
        tbody.on
        {
            display: table-row-group;
        }
        tbody.off
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        function toggleTbody(id) {
            if (document.getElementById) {
                var tbod = document.getElementById(id);
                if (tbod && typeof tbod.className == 'string') {
                    if (tbod.className == 'off') {
                        tbod.className = 'on';
                    } else {
                        tbod.className = 'off';
                    }
                }
            }
            return false;
        }
    </script>
</head>
<body onload="hideRows()">
    <div id="wrap">
        <div id="main" class="clearfix">
            <div id="Bodycontainer">
                <div id="Header">
                    Header</div>
                <div id="TopLeft">
                    top left</div>
                <div id="LogDiv">
                    <div id="WelcomeDiv">
                        Welcome</div>
                </div>
                <div id="Ads">
                    Ads Go Here</div>
                <div id="TopRight">
                    Something else goes here
                </div>
                <div style="position: absolute; left: 10px; width: 743px; top: 160px; height: 430px;
                    padding-bottom: 163px; z-index: 1;">
                    <table>
                        <tr class="Spacer">
                            <td colspan="4">
                                <table id="FreeTD">
                                    <tr>
                                        <td colspan="4">
                                            <blockquote>
                                                Footer will not stay at the bottom.</blockquote>
                                        </td>
                                    </tr>
                                    <tr>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('1');"><span class="MainEquip">Legs And Lower
                                                    Body</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="1" class="off">
                                            <td class="EquipTD">
                                                Leg Curls
                                            </td>
                                            <td class="EquipTD">
                                                Leg Press
                                            </td>
                                            <td class="EquipTD">
                                                Calf Raises Seated
                                            </td>
                                            <td class="EquipTD">
                                                Standing Calf Raise
                                            </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Squats
                                        </td>
                                        <td class="EquipTD">
                                            Leg Extension
                                        </td>
                                        <td class="EquipTD">
                                            Hack Squat
                                        </td>
                                        <td class="EquipTD">
                                            Leg Lunges
                                        </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('2');"><span class="MainEquip">Arms and Upper
                                                    Body</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="2" class="off">
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Bench Press
                                        </td>
                                        <td class="EquipTD">
                                            Barbell Curl
                                        </td>
                                        <td class="EquipTD">
                                            Flat Bench Flyes
                                        </td>
                                        <td class="EquipTD">
                                            Incline Barbell Press
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Stiff Leg Deadlifts
                                        </td>
                                        <td class="EquipTD">
                                            Tricep Pressdowns
                                        </td>
                                        <td class="EquipTD">
                                            Tricep Close-Grip
                                        </td>
                                        <td class="EquipTD">
                                            DumbBell Bench Incline
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Upright Rows
                                        </td>
                                        <td class="EquipTD">
                                            Military Press
                                        </td>
                                        <td class="EquipTD">
                                            Lawn Mowers On/off Bench
                                        </td>
                                        <td class="EquipTD">
                                            Hammer Curls
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Parallel Bar Dips
                                        </td>
                                        <td class="EquipTD">
                                            DumbBell Wrist Curls
                                        </td>
                                        <td class="EquipTD">
                                            Shrugs
                                        </td>
                                        <td class="EquipTD">
                                            Bent Over Rows
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Nose Breakers
                                        </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('3');"><span class="MainEquip">Ab Workouts</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="3" class="off">
                                            <td class="EquipTD">
                                                Abs Twist
                                            </td>
                                            <td class="EquipTD">
                                                Abs Crunches
                                            </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('4');"><span class="MainEquip">Nautilus</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="4" class="off">
                                            <td class="EquipTD">
                                                Abdominal
                                            </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Bicep Curl
                                        </td>
                                        <td class="EquipTD">
                                            Lateral Raise
                                        </td>
                                        <td class="EquipTD">
                                            Lower Back
                                        </td>
                                        <td class="EquipTD">
                                            Overhead Press
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Pullover
                                        </td>
                                        <td class="EquipTD">
                                            Tricep Extension
                                        </td>
                                        <td class="EquipTD">
                                            Hip Abduction / Adduction
                                        </td>
                                        <td class="EquipTD">
                                            Vertical Chest
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Incline Press
                                        </td>
                                        <td class="EquipTD">
                                            Leg Extension
                                        </td>
                                        <td class="EquipTD">
                                            Leg Press
                                        </td>
                                        <td class="EquipTD">
                                            Seated Leg Curl
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Rear Delt / Pec Fly
                                        </td>
                                        <td class="EquipTD">
                                            Nautilus Recumbent Exercise Bikes
                                        </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('5');"><span class="MainEquip">HAMMER STRENGTH</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="5" class="off">
                                            <td class="EquipTD">
                                                Iso-Lateral D.Y. Row
                                            </td>
                                            <td class="EquipTD">
                                                Iso-Lateral Front Lat Pulldown
                                            </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Iso-Lateral Incline Press
                                        </td>
                                        <td class="EquipTD">
                                            Iso-Lateral Decline Press
                                        </td>
                                        <td class="EquipTD">
                                            Iso-Lateral Shoulder Press
                                        </td>
                                        <td class="EquipTD">
                                            Iso-Lateral Row
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Body Weight Chin/Dip/Leg Raise
                                        </td>
                                        <td class="EquipTD">
                                            Seated Bicep
                                        </td>
                                        <td class="EquipTD">
                                            Grounded Squat / Lunge
                                        </td>
                                        <td class="EquipTD">
                                            Seated Tricep
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Grounded High Pull
                                        </td>
                                        <td class="EquipTD">
                                            Iso-Lateral Rear Deltoid
                                        </td>
                                        <td class="EquipTD">
                                            Seated Calf Raise
                                        </td>
                                        <td class="EquipTD">
                                            Uni-Lateral Leg Press
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            Iso-Lateral Bench Press
                                        </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('6');"><span class="MainEquip">LifeFitness</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="6" class="off">
                                            <td class="EquipTD">
                                                LifeFitness Elliptical Cross Trainers
                                            </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('7');"><span class="MainEquip">Randal</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="7" class="off">
                                            <td class="EquipTD">
                                                Randal WindRacer
                                            </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('8');"><span class="MainEquip">StairMaster</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="8" class="off">
                                            <td class="EquipTD">
                                                StairMaster FreeClimber Exercise System
                                            </td>
                                    </tr>
                                    <tr>
                                        <td class="EquipTD">
                                            StairMaster Gravitron Upper Body System
                                        </td>
                                        </tbody>
                                        <tr>
                                            <td colspan="4" class="MainEquip">
                                                <a href="#" onclick="return toggleTbody('9');"><span class="MainEquip">STARTRAC</span></a>
                                            </td>
                                        </tr>
                                        <tbody id="9" class="off">
                                            <td class="EquipTD">
                                                Star Trac Treadmills
                                            </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <blockquote style="color: #464646; font-size: 10px;">
            This is the FOOTER</blockquote>
    </div>
</body>
</html>

Open in new window


However, you should really look to change your source and clean it up when you get time where the first, cleaner and easier solution I provided worked. Also, I'd suggest using the 960 grid framework to clean up your code and for any future web projects from here on out...makes things easier to work with and takes much of the table to div migration easier to cope with in regards to ease of use...heck it's just a great framework..here's the link: http://960.gs/
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38829451
@Element1910
thanks for your time.
However, it still does the same as the previous code.
When you click on the "Hammer Strength"
it goes right over the Footer.

Thanks once again for the try.
I am currently working on another DIV site.
I do want to get away from using Tables in my design, however, it is not
Something that I can jump right into at the moment.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38829455
Also, the code that is provided in the link.
This is from a ASP Database Generated page.
It is actually pretty clean, it is just that I am trying to implement something into it, that is making things not so tidy.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38829474
I think I finally got it.
I will post my findings here in a little while
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 30

Author Comment

by:Wayne Barron
ID: 38829488
http://www.stayinshape.us/test/Main6.htm

Have the
 #content{
height:100%;
}

Along with other CSS changes.
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 38829528
trying and trying again, and I finally figured it out.
Thanks again Cobo.

Carrzkiss
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38831349
Yeah as things start to work is begins to make sense, and if you ride it through a few rough spots it gets easier each time; until you can see what the page is going to look like while you are still writing the code.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38831378
Is using position:relative;
A good thing? as the way I have the site designed right now, and working good, is using that setting.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38831426
Yes position:relative is what you want. It tells the browser to position within the normal flow of the document, and position everything it contains to also stay in the normal flow unless it is specifically overridden.  Most of the time you don't have to explicitly specify it unless you are using it for a wrapper or container of positioned content.

The default is position:static which is the same as relative except that with relative you can apply small adjustment to the left and top properties, and static will not allow any position adjustment except the normal flow.  

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38832019
Good!
I was hoping for that answer.
The site is coming along, I am getting ready to upload it to the live server.
The only issue that I have is that my Footer is WAYYYYY down at the bottom.
And I have no idea as to why.

This is running locally.
Can you please let me know what is causing the footer to be set to far down?
http://216.97.166.158/InShape/Main.asp?Type=Home
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38836416
Never use height 100%.  999 times out of a thousand the browser (all browsers) will get it wrong.  Most of the time you don't specify a height, and then the browser will set it to the height of the content.  When you need to hold a specific height, you express it in px or em so the browser does not have to quess, because during parsing it is asking "100% of what?".

You have height 100% on content and contentwrapper.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38837121
Actually, contentwrapper width:100%

I changed the Content, to no Height, and the footer is still way at the bottom.
I tried the EM, and the content goes over the footer when I do that.
So, EM is not going to work in this one.

Leaving it without the Height specified is the best way to go, it is just on certain pages, the Footer is way far down, and other pages, it is ok.
So, I am going to continue playing around with it, however, I do have to release this site, as I have another project that I had to have ready by: February 19th, 2013 (My Birthday)
It is also the release date for a much anticipated video game. A fan site for the Video Game.

Thanks for your help Cd&, I have to let this footer issue stand for right now, as I have to get on the other project.

Carrzkiss
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38837149
February 19th, 2013 (My Birthday)

An interesting coincidence... My birthday is Feb 20.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38837989
February is a good month indeed :)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now