homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Footer not clearing content in IE7

5+ Year Member

Msg#: 3282273 posted 11:27 pm on Mar 14, 2007 (gmt 0)

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;



10+ Year Member

Msg#: 3282273 posted 12:23 am on Mar 15, 2007 (gmt 0)

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]


5+ Year Member

Msg#: 3282273 posted 1:02 am on Mar 15, 2007 (gmt 0)

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


10+ Year Member

Msg#: 3282273 posted 2:06 am on Mar 15, 2007 (gmt 0)

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+ Year Member

Msg#: 3282273 posted 5:33 am on Mar 15, 2007 (gmt 0)

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


10+ Year Member

Msg#: 3282273 posted 6:06 am on Mar 15, 2007 (gmt 0)

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 #outer and #inner (where #inner is inside #outer.) From there, both #outer and #inner 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 min-height, you can set min-height 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 min-height.

And that's it :)


10+ Year Member

Msg#: 3282273 posted 7:52 am on Mar 15, 2007 (gmt 0)

Also have a look there :

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved