Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Footer not clearing content in IE7



11:27 pm on Mar 14, 2007 (gmt 0)

5+ Year Member

Hey all... i usually dont have any troubles with footers because well i have several working ones on the Internet atm.
Basically i don't want footers to sit at the bottom of the viewpoint... as long as they sit under the content im happy.
I have done this several times.
But i got this one website that is being a pain and it just doesnt want to clear the content.

Ive tried everything but the solution just wont reveal itself, can someone shed some light on this problem.

<!-- used to make shadowed edges /-->
<div id="outer">
<div id="inner">
<!-- end shadowed edges -->
<div id="header">
<div id="content">
<div id="menu_container">
<div id="text">
<h1>Heading 1 </h1>
<p>Lorem ipsum est lorem fierent te, ea mei doming vituperata, an decore
commune est. Ad appetere lobortis disputando eam, his in illum nostro.
Ne legimus intellegebat mel, omnium omittantur ius no. Ne pri veri
probatus inciderint, porro euripidis pri ne. Dicant ubique at sed.</p>
<div id="footer">
<p>footer junk</p>

and now the css

* {padding: 0px; margin: 0px;}

background-image: url(images/back.jpg);
background-repeat: repeat-x;
text-align: center;
height: 100%;
color: #000000;

height: 98%;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
text-align: center;
margin-right: auto;
margin-left: auto;

#footer {
height: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
clear: both;
font-size: 0.9em;
position: relative;
width: 770px;
margin: 50px auto 0px;
float: none;

#outer {
width: 780px;
background: #FFF url(images/shadow_r1_c1.jpg) no-repeat left top;
text-align: left;
position: relative;
height: 600px;
margin: 8px auto 0px;
padding: 0px;

#inner {
padding-left: 5px;
padding-right: 6px;
background: url(images/shadow_r1_c5.jpg) no-repeat right top;
height: 574px;

#header {
height: 137px;
margin: 0px;
padding: 0px;
width: auto;
position: relative;}

#content {
margin: 0px 7px;
float: left;
width: 770px;

#text {
width: 590px;
margin: 0px 0px 23px 12px;
padding: 0px;
float: left;

width: 150px;
background: url(images/menu_r3_c1.gif) repeat-y;
height: 550px;
float: left;
margin: 0px 0px 0px 7px;
padding: 0px;


12:23 am on Mar 15, 2007 (gmt 0)

10+ Year Member

Cant quite see what your looking for here ive slapped your code into a test document, the footer appears at the bottom inline with the left menu and main content area. Do you want it to be inline with the base of the browser window? or something else?

If your having issues with divs not clearing when you want them to try inserting another one below the block/s you need to clear and apply this style to is

height: 0px;
clear: both;

[edited by: PSWorx at 12:29 am (utc) on Mar. 15, 2007]


1:02 am on Mar 15, 2007 (gmt 0)

5+ Year Member

Ok after i read ur post i went through everything very slowly... i figured it out and its the doctype im using strict... i dont get why this effects it all.

I dont understand what the doctype does


2:06 am on Mar 15, 2007 (gmt 0)

10+ Year Member

I couldnt offer you a decent explanation on this other than how the html/xhtml is processed by the browser, which if set (doctype) is governed by the doctype decleration, i always include it either xhtml 1.0 or 1.1 but always forget about it when offering help on css.

Perhaps one of the forum mods could help out here or further more take a look on w3c website for additional info related to the doctype and how it affects the rendering of html.

1 example i can offer is regarding the centering of content in divs, if no doctype is used then this is not possible as far as i am aware and the use of a containing div with text-align: center is required, but with the doctype (or the correct doctype) the use of margin-left/margin-right: auto and a preset width would have the same effct.


5:33 am on Mar 15, 2007 (gmt 0)

5+ Year Member

Sorry let me just change that im not sure if it is completely the doctype... i changed it to transitional and it still is stuffed in IE7 but if i dont ad one its perfect... so im totally confused and in the dark about how to fix this


6:06 am on Mar 15, 2007 (gmt 0)

10+ Year Member

I tested this in Firefox 2 [Win & OS X], Opera 9.10 [Win & OS X], Safari, IE 6 and IE 7, with all the same results, using the following doctypes:

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

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

All tested browsers showed the footer below both "link" and "Heading 1 [...] ubique at sed."

Most notable effects of correct doctypes in the correct location are:

  • Box model fixed
  • auto margins available
  • tables inherit font size correctly
  • that's all I can remember

... but this is not the only problem.

The other problem is that your footer is outside of both

is inside
.) From there, both
have defined height values.

Height is calculated irrespective of content - basically, it will go "I am this height. What's inside me? Taller than my height? Oh well, too bad."

So, I suggest:

  • Make sure your doctype is correct, and in the correct spot - a doctype with an xml declaration preceding it will throw IE into quirks mode;
  • Remove the height values - if you want what's called
    , you can set
    for browsers-other-than-IE-6, and in a spot just for IE 6 to render, set height to the same value. IE 6 interprets height as

And that's it :)


7:52 am on Mar 15, 2007 (gmt 0)

10+ Year Member

Also have a look there :

Featured Threads

Hot Threads This Week

Hot Threads This Month