/    Sign up×
Community /Pin to ProfileBookmark

Positioning: an alternative for ‘min-height’ property in IE6.0 ???

[B]What would be a work-around for the ignored “min-height” property in IE6?[/B]

All I want to do is to make the ‘footer’ DIV stay at the bottom of the pages across my website in the situations, where there’s not enough content in the ‘content’ DIV in order to “push” the ‘footer’-DIV down.

html,body {
height : 100%;
}

div.container {
height:100%;
width: 85%;
margin: 0 auto;
}

div.mainContent {
width:100%;
[COLOR=”Red”]height:70% /*Calculated height, so that the footer stays visible without scrolling down. This is where the problem lies. */[/COLOR]
margin-top:20px;
}

div.footer {
width:60%;
margin:auto;
margin-top:20px; /* separates the footer from the main content */
text-align:justify;
font-family:Arial;
font-size:10px;
}

[code=html]
<div class=”container” >
<div class=”mainContent”> … bla-bla…. </div>
<div class=”footer”>…. disclaimer …. </div>
</div> <!– End of Container–>
[/code]

[U]I could have used height:70% for the content div — that way the footer would stay visible without scrolling down[/U], but [B]I have collapsable DIVs on the page, so when I open those DIVs, they overflow the footer, covering it! And that is because the footer does not get pushed down by the ‘content’ DIV![/B]

Please help solve this.
Thank you.

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelApr 26.2007 — Try:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;*
/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}

h1{font-size: 1.93em; margin-top:12px;}

h2{font-size: 1.72em; margin-top:12px;}

h3{font-size: 1.52em; margin-top:12px;}

h4{font-size: 1.42em; margin-top:12px;}

h5{font-size: 1.32em; margin-top:12px;}

h6{font-size: 1.21em; margin-top:12px;}

#wrapper {position:relative; width:760px; margin:10px auto; height:80%; padding:20px; border:3px double silver; padding-bottom:90px;}/* padding-bottom required to prevent content from sitting on top of footer */

#footer {position:absolute; bottom:0; left:65px; border:6px double green; width:650px; height:45px; padding:20px 10px 0 10px; margin:10px auto; }

#footer p {text-align:center;}

</style>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<div id="wrapper"><!-- WRAPPER -->

<h1>First Header</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

<div id="footer">

<p>This footer is positioned at the bottom of the screen and stays there.</p>

</div>

</div><!-- end WRAPPER -->

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@andkhlauthorApr 26.2007 — A List Apart: Articles: Faux Columns[/QUOTE]

I'll explore the article and see it that works for me. Thanks.
Copy linkTweet thisAlerts:
@andkhlauthorApr 26.2007 — WebJoel, thank for your reply.

Just for the heck of it, I copied and pasted that code into a new page and tested the page, and it turns out that the code fully works only in IE.

In Netscape and Firefox, the code worked only partially. That is, the footer stayed at the buttom (which is what I needed), BUT(!) it did not get pushed down by the #wrapper when I added extra lines into it. Instead, those extra lines of content went [U]OVER[/U] the footer, covering it.

Oh.. I don't know.. I guess, I'll just keep on trying...

Thanks anyway!!!
Copy linkTweet thisAlerts:
@WebJoelApr 26.2007 — It's a starting point for sure. I'll see if I can get it working for ya. ?

(back) :

Here we go... a quick 10-min. makeover and I see that it works for Fx. Easy. ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body,html {min-height:100%; height:100%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;*
/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}

h1{font-size: 1.93em; margin-top:12px;}

h2{font-size: 1.72em; margin-top:12px;}

h3{font-size: 1.52em; margin-top:12px;}

h4{font-size: 1.42em; margin-top:12px;}

h5{font-size: 1.32em; margin-top:12px;}

h6{font-size: 1.21em; margin-top:12px;}

#wrapper {position:relative; width:760px; margin:10px auto; height:80%; border:3px double silver; padding-bottom:90px;}/* padding-bottom required to prevent content from sitting on top of footer */

#wrapper h1, #wrapper p {padding:10px 10px 10px 15px; }

#footer {position:absolute; bottom:0; right:0; border:6px double green; width:98%; height:45px;}

#footer p {text-align:center;}

</style>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<div id="wrapper"><!-- WRAPPER -->

<h1>First Header</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>


<div id="footer">

<p>This footer is positioned at the bottom of the screen and stays there.</p>

</div>

</div><!-- end WRAPPER -->

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@CentauriApr 26.2007 — I gave a description of how to do this for another poster a while back. See this thread.

Cheers

Graeme
×

Success!

Help @andkhl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...