Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-28
19
Medium Priority
?
420 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 31

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 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 31

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 31

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 31

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 31

Author Comment

by:Wayne Barron
ID: 38829474
I think I finally got it.
I will post my findings here in a little while
0
 
LVL 31

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 31

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 31

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 31

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 31

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 31

Author Comment

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

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

722 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