CSS Forum

**Rayo** · 03:49 PM

Hi everyone, can anyone help with this frustrating problem.
Basicaly what I am trying to do using div's is, place three text boxes within a container div, a left and right text box, and a footer text box.
The page content, and so length will vary, an I need the footer to push down with the content and stay at the bottom of the page.
I know that using position absolute in the page div's is messing things up but nothing I have tried from all of the sticky footer methods I have found on the net works to cure this problem.
I can do it easily with tables but I am trying to avoid them.
This is the basic script with position absolutes that I started with:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div id="container">
<div id="left">left content</div>
<div id="right">right content</div>
<div id="footer">footer content</div>
</div>
</body>
</html>

Code:

#container {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
#left {
  position: absolute; 
  top: 200px; 
  left: 106px;
  text-align: center;
}
#right {
  position: absolute; 
  top: 200px; 
  left: 485px;
  text-align: center;
}
#footer {
  position: absolute; 
  top: 568px; 
  left: 359px;
}

**Kelpie** · 06:48 AM

Change your css to the following, and it should work ok

Code:

html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}

#container {
width: 1000px;
margin: 0 auto;
position: relative;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
min-height: 100%; /* real browsers */
}
#left {
float: left;
width: 470px;
text-align: center;
}
#right {
margin-left: 485px;
text-align: center;
}
#footer {
position: absolute;
bottom: 0; /* stick to bottom of page */
left: 359px;
}

You'll need a clearer in the html as well, after the <div id="right">right content</div>

**Rayo** · 02-21-2011, 02:10 PM

Thanks for the speedy help Kelpie.
Your suggestion is a big improvement on my efforts so far, but the left div content still overlaps the footer, also I can't get the right div content to position
far enough to the left, and using margin right instead causes the column to go out of line near the bottom of the content.
I've tried padding this and that etc and fiddling with the parameters but still no joy.
please excuse my ignorance but "a clearer in the html" ? could you clarify this please.
Thanks again.
Rayo

**LadynRed** · 02-21-2011, 03:33 PM

First, you need to get rid of ALL that positioning, it simply isn't necessary. Learn to use floats and the normal document flow.

**Rayo** · 02-21-2011, 04:38 PM

With respect LadynRed your answer does not really provide the help I was asking for.
I see plenty of people all over the net having problems trying to get css only positioning working in all popular browsers.
There are a fair few solutions out there but they don't work for every situation,and can't, I have already tried many of them with various tweaks and no success.
They all work untill you start messing with cascading or nested div's.
Thanks for your input anyway.
Rayo

**Kelpie** · 06:19 AM

When you use floated elements it's important to clear them, that's what I meant by a "clearer", e.g. using <br class="clearLeft" /> to clear left floated elements where .clearLeft is defined as

CSS

Code:

.clearLeft {
clear: left;
display: block;
height: 0;
font-size: 1px;
line-height: 0px;
}

Check the stickies at the top of this forum for more in-depth info on floats and clearing them.

As for the footer overlap, my bad, I forgot to take account of that. It is easy to fix though by setting a height for the footer and placing the content elements in a containing div with padding-bottom equal to the footer height:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div id="container">
    <div id="content">
        <div id="left">left content</div>
        <div id="right">right content</div>
    </div>
    <div id="footer">footer content</div>
</div>
</body>
</html>

CSS changes

Code:

#content {
padding-bottom: 3em; /* equal to #footer height */
overflow: auto;
}
#footer {
position: absolute;
bottom: 0; /* stick to bottom of page */
left: 359px;
height: 3em;  /* equal to #content padding-bottom */
}

The overflow: auto; in #content takes care of clearing the float, so you don't have to use a separate clearer.

You can get the right column further to the left by reducing both the width of #left and the left-margin of #right. The left-margin of #right must always be at least equal to the width of #left though. Preferably at least 3 pixels more or problems arise in IE6 (which unfortunately a lot of people still insist on using)

**LadynRed** · 02-22-2011, 08:21 AM

overlap: auto? There no such thing as overlap. I think what you mean is OVERFLOW.
There are a number of ways to clear floats, but adding non-semantic, extraneous markup to do it is not optimal.

I'm not sure I understand the obsession with having every page fill the entire viewport with the insistence that the footer must be at the bottom of that window.

What I meant about the positioning was that it is completely unnecessary to have everything positioned as your original code shows. It CREATES headaches, especially with IE, and you completely defeat the normal flow of elements on the page. Using (and clearing) floats properly, and setting up your layout so that the footer always appears last in the html generally ensures that it will always be at the bottom - of your content.

**Rayo** · 02-24-2011, 06:04 AM

Hi everyone...please excuse the delayed reply, I was called away on other business for a few days.
Thank's for the in depth explanations Kelpie, we learn by example.
I'll get back on to it and post my results shortly.
cheers
Rayo

**Kelpie** · 02-24-2011, 06:27 AM

Quote:

Originally Posted by LadynRed

overlap: auto? There no such thing as overlap. I think what you mean is OVERFLOW.

erm, yeah, not sure how I made that mistake. Just thinking about fixing the footer overlap caused that word to be in my mind I guess. Post edited and corrected

**Rayo** · 04:05 AM

Thank's Kelpie now we're really getting somewhere, your suggestions worked beautifully.
This method works well in Firefox, Safari, Opera, Netscape and IE6.
This is the relevant layout and css:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div id="container">
<div id="content">
<div id="left">left content</div>
<div id="right">right content</div>
</div>
<div id="footer">footer content</div>
</div>
</body>
</html>

#container {
width: 1000px;
margin: 0 auto;
position: relative;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
min-height: 100%; /* real browsers */
}
body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
#content {
padding-bottom: 3em; /* equal to #footer height */
overflow: auto;
}
.left {
padding-top: 200px;
padding-bottom: 40px;
float: left;
width: 400px;
text-align: center;
}
* html .left { /* ie6 fix */
padding-bottom: 80px;
}
.right {
margin-left: 400px; /* equal to .left width */
padding-top: 200px;
padding-right: 260px;
padding-bottom: 40px;
text-align: center;
}
#footer {
position: absolute;
bottom: 0; /* stick to bottom of page */
left: 359px;
height: 3em; /* equal to #content padding-bottom */
}

Cheers
Rayo

**Rayo** · 02-25-2011, 04:11 AM

I have now ammended the script above to clarify it for readers with similar problems.
A big thank's to Kelpie and Ladynred for helping with my understanding of floats and positioning.
Cheers
Rayo