synic

# November 27, 2008 at 10:33 pm

I’ve been trying to make this work for about 3 days now and I cannot for the life of me figure out why this is behaving like it is…

I’ve been googling how to create a css footer that will stay stuck to the bottom of the page regardless of the amount of content on the page and I came across Ryan Fait’s Sticky Footer solution and 47M’s similar solution. They both work OUT OF MY CODE, but when I implement this it seems like the footer is at the "bottom of the page" initially, but then you scroll and and realize it’s sitting in the middle of the content.

I think it has something to do with my main-content div, but I really do not know. Anyway here’s my problematic css and html:

style.css:

Code:

/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 62.5% Helvetica, sans-serif; color: #ffffff; background: #000000; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/* END RESET */

/* TOOLBOX CSS */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.transpBlack { background: url(transpBlack.png); }
/* END TOOLBOX */

/* PAGE STRUCTURE */
#page-wrap {
position: relative;
min-height: 100%;
width: 900px;
margin-top: 10px;
margin-left: 450px;
margin-bottom: -230px;
}

#header {
width: 800px;
height: 288px;
position: relative;
background-image: url(images/header2.jpg);
}

#header ul { margin: 0; padding: 0; }

#header a { position: absolute; width: 563px; height: 83px; text-indent: -1000em;}

#header .home a { top: 8px; left: 231px;}

#main-content {
position: absolute;
width: 600px;
top: 360px;
left: -70px;
padding-right: 20px;
border-right: thin solid #fff;
}

#main-content p {
font-size: 1.2em;
font-family: Verdana, serif;
line-height: 1.3em;
margin-bottom: 1.2em;
}

#sidebar {
position: absolute;
background: #000;
width: 300px;
top: 360px;
left: 580px;
padding: 0px 0px 0px 20px;
border-left: thin solid #fff;
}

#sidebar p {
font-size: 1.1em;
font-family: Verdana, serif;
line-height: 1.2em;
margin-bottom: .3em;
}

#sidebar img {
border: thin solid #fff;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

#footer {
border-top: thin solid #fff;
height: 230px;
position: relative;
width: 100%;
}

.clearfooter { clear: both; height: 230px; }

#sidebar img:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

ul#nav {}

ul#nav li { display: inline; }

ul#nav li a { display: block; height: 32px; text-indent: -9999px; float: left; }

ul#nav li.about a { width: 136px; background: url(images/nav-about2.jpg) bottom center no-repeat; }
ul#nav li.performances a { width: 146px; background: url(images/nav-performances2.jpg) bottom center no-repeat; }
ul#nav li.repertory a { width: 112px; background: url(images/nav-repertory2.jpg) bottom center no-repeat; }
ul#nav li.auditions a { width: 113px; background: url(images/nav-auditions2.jpg) bottom center no-repeat; }
ul#nav li.contact a { width: 105px; background: url(images/nav-contact2.jpg) bottom center no-repeat; }
ul#nav li.outreach a { width: 188px; background: url(images/nav-outreach2.jpg) bottom center no-repeat; }
ul#nav li a:hover { background-position: center center; }

/* END STRUCTURE */

index.html

Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• About
• Performances
• Repertory
• Auditions
• Contact
• Outreach

Lorem ipsum nec omnis vivendo repudiandae et, eu quidam utroque mentitum mei, per in dicta iisque referrentur. Tation partem suavitate mea ex, partem mucius accusata at eam. Clita dissentias eam ut, vel blandit evertitur adversarium et. Ea movet facilisis iudicabit quo, munere legimus verterem cu quo. Eu scripta sanctus urbanitas qui, melius menandri accommodare has ne.

Suas eripuit temporibus cum ex, vix at sumo verterem corrumpit. Tempor vocent at est, duo et unum saepe officiis, et soleat deleniti vel. In justo equidem luptatum sed. Habeo offendit salutandi ad sed. Sea an falli eirmod blandit, nec ubique noluisse honestatis ea. Vituperatoribus ludus noluisse in mel, cu etiam sonet nullam vim, qui ei omnis voluptua similique.

Vel et facete legimus disputando, his ut erant nullam maluisset. Idque singulis necessitatibus an vix, no eos choro alterum detracto, ad eum dolor nominati constituam. Ei usu utamur deserunt expetendis, te eros aperiam complectitur mei. Cum augue ludus deleniti ex, amet ullum error ei pri, te solum augue causae est. Et per veniam graece nostrum, te cum libris mandamus sententiae, eu sonet sapientem tincidunt nam. Ei illud dissentiunt liberavisse pro.

Has tibique blandit inciderint eu, an eum dicant mediocrem maluisset, vero mundi detraxit qui eu. Vix in voluptua ponderum scripserit, ei sea erat tritani aliquyam, quot causae scriptorem pri at. Eum illum sententiae cu, at iriure nonummy mei. Ei dicam convenire conclusionemque vim, in dicam nullam vidisse eos, duo ex agam dissentiet. Sed ad duis movet scriptorem. Amet accusam definiebas vim ne, elit sonet ne nec. Debitis invidunt facilisi vim an, ius duis altera adolescens at, vel cu ullum perfecto deserunt.

At has suas autem laboramus, volumus probatus accusamus ne nec. Habeo nemore principes te usu, iisque tritani admodum est ne. Eos puto rebum quaerendum in, et vis saepe populo. An putent nemore legendos vim, id eam habeo incorrupte, duo at vide doming iriure. Dicant dictas vituperata ius id, ut atomorum consulatu intellegam sea. Magna oratio menandri est ex.

Ad fuisset corpora oportere pro, ad his mazim nostrum suavitate, duo euismod gloriatur necessitatibus ne. Ius tractatos facilisis ne, illud possim inciderint ei ius, duo impetus placerat no. Ne vero homero qui, molestiae liberavisse interpretaris eu cum, fuisset epicuri laboramus id duo. Voluptua legendos evertitur ut sed, eum affert equidem veritus cu, id vocent docendi insolens vim. Novum decore nullam cum te, id ius accusam gloriatur eloquentiam. Quem nisl primis duo cu, per id modo dico audiam.

At has suas autem laboramus, volumus probatus accusamus ne nec. Habeo nemore principes te usu, iisque tritani admodum est ne. Eos puto rebum quaerendum in, et vis saepe populo. An putent nemore legendos vim, id eam habeo incorrupte, duo at vide doming iriure. Dicant dictas vituperata ius id, ut atomorum consulatu intellegam sea. Magna oratio menandri est ex.

Ad fuisset corpora oportere pro, ad his mazim nostrum suavitate, duo euismod gloriatur necessitatibus ne. Ius tractatos facilisis ne, illud possim inciderint ei ius, duo impetus placerat no. Ne vero homero qui, molestiae liberavisse interpretaris eu cum, fuisset epicuri laboramus id duo. Voluptua legendos evertitur ut sed, eum affert equidem veritus cu, id vocent docendi insolens vim. Novum decore nullam cum te, id ius accusam gloriatur eloquentiam. Quem nisl primis duo cu, per id modo dico audiam

Become a fan of MarDelDance on Facebook

Visit us on Myspace

Footer footer footer informaton

Some other things: I’m sure there’s stuff I could clean up, but I’m just really wanting to fix my footer issue. My header div is so I can place a hotspot on the image. The image link right below the ud #nav is underneath my main-content div. I sort of forget how I achieved this — I just looked up "content over image css" and found a way to do it; and I know there are different ways of doing this. Can’t think of anything else to say right now. If anyone would be kind enough to attempt to help me, that’d be wonderful. Thanks.

P.S. Yay for using the blank CSS template that was on css-tricks awhile ago :P

chazzwick

# November 28, 2008 at 5:21 am

im pretty sure i had the same problem, and someone told me it was the fact i was using absolute positioning to position my elements. This takes them out of the flow of the page, and means the footer ends up higher than its supposed to. Try positioning your main-content and sidebar without absolute positioning.

synic

# November 28, 2008 at 10:33 am

Well, i made everything (except for my #header a) use relative positioning, and now the footer sticks to the bottom… way, way on the bottom. My sidebar also moves up when I have less content. I’m going to go pull what is left my hair out.

synic

# November 28, 2008 at 11:51 am

So, I made some progress. However, now my nav bar seems out of line. The only link that seems in line is the one all the way on the right. To click on the others you kind of have to put the cursor a little bit towards the top of the word instead of being able to hover directly in the center and click. Here’s my new code:

style.css

Code:

/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 62.5% Helvetica, sans-serif; color: #ffffff; background: #000000; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/* END RESET */

/* TOOLBOX CSS */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.transpBlack { background: url(transpBlack.png); }
/* END TOOLBOX */

/* PAGE STRUCTURE */
#page-wrap { position: relative;
min-height: 100%;
width: 900px;
margin-top: 10px;
margin-left: 450px;
margin-bottom: -200px; }

#header { width: 800px;
height: 288px;
position: relative;
background-image: url(images/header2.jpg); }

#header ul { margin: 0; padding: 0; }

#header a { position: absolute; width: 563px; height: 83px; text-indent: -1000em;}

#header .home a { top: 8px; left: 231px;}

#content-bg { position: absolute;
width: 800px;
height: 337px;
background-image: url(images/content-bg2.jpg);
top: 320px;
z-index: 1; }

#main-content { position: relative;
width: 600px;
top: 10px;
z-index: 1000;}

#main-content p { font-size: 1.2em;
font-family: Verdana, serif;
line-height: 1.3em;
margin-bottom: 1.2em; }

#sidebar { position: absolute;
background: transparent;
left: 650px;
top: 330px;
width: 300px;
padding: 0px 0px 0px 20px;
border-left: thin solid #fff;
z-index: 500;
}

#sidebar p { font-size: 1.1em;
font-family: Verdana, serif;
line-height: 1.2em;
margin-bottom: .3em;
}

#sidebar img { border: thin solid #fff;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5; }

#footer { border-top: thin solid #fff;
height: 200px;
position: relative;
width: 100%; }

.clearfooter { clear: both; height: 200px; }

#sidebar img:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

ul#nav {}

ul#nav li { display: inline; }

ul#nav li a { display: block; height: 32px; text-indent: -9999px; float: left; }

ul#nav li.about a { width: 136px; background: url(images/nav-about2.jpg) bottom center no-repeat; }
ul#nav li.performances a { width: 146px; background: url(images/nav-performances2.jpg) bottom center no-repeat; }
ul#nav li.repertory a { width: 112px; background: url(images/nav-repertory2.jpg) bottom center no-repeat; }
ul#nav li.auditions a { width: 113px; background: url(images/nav-auditions2.jpg) bottom center no-repeat; }
ul#nav li.contact a { width: 105px; background: url(images/nav-contact2.jpg) bottom center no-repeat; }
ul#nav li.outreach a { width: 188px; background: url(images/nav-outreach2.jpg) bottom center no-repeat; }

ul#nav li a:hover { background-position: center center; }

/* END STRUCTURE */

index.html

Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• About
• Performances
• Repertory
• Auditions
• Contact
• Outreach

Visit us on Facebook and Myspace

Lorem ipsum nec omnis vivendo repudiandae et, eu quidam utroque mentitum mei, per in dicta iisque referrentur. Tation partem suavitate mea ex, partem mucius accusata at eam. Clita dissentias eam ut, vel blandit evertitur adversarium et. Ea movet facilisis iudicabit quo, munere legimus verterem cu quo. Eu scripta sanctus urbanitas qui, melius menandri accommodare has ne.

Footer footer footer informaton

Ugh.