Page 1 of 1

two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 7:20 pm
by alex.barylski
I have two columns, left column is about 400px the right is about 300px.

I have a footer DIV which is appended to the end of the document via somehting like (bottom: 0)

Code: Select all

<div>  <div style="position: absolute; width: 400px">    Left column content  </div>  <div style="position: relative; top: 0px; left: 400px">    Right column content  </div>  <div style="bottom: 0">    Footer links  </div></div>
When the content in the left column is greater (vertically) than the right the left content slips UNDER the footer...instead of pushing it down.

I have tried floating the right column and left column but in both cases one column would float under the footer. I also tried clearing the float with a separate DIV after both left and right DIV's and still the same result.

How do I force the footer to stick to the bottom, even when there is not much content in left or right but at the same time force it down when the left or right have more or less than the other???

Cheers :)

Re: two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 7:25 pm
by Eran
From my experience what you want to achieve is unfortunately impossible using CSS only... it is truly sad, and this requirement pops more often than you'd think.

I would love if anyone could prove me wrong, since I've been looking for a solution too...

Re: two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 7:51 pm
by alex.barylski
I've done it before I'm sure...I just don't use CSS enough to remember how it was done...

I'm sure it was with a <div> with cleared floats immediately after the other divs...but of course it's not working now. I guess it's possible that in the past I didn't test as extensively and maybe my solution didn't work as I thought it did...haha.

I'm sure I've seen this done before though...just need an XHTML/CSS guru to step in and show me the way :P

Re: two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 8:06 pm
by Eran
I'm pretty experienced with CSS and HTML... The problem is here that in order for the footer to be at the bottom when there's not enough content, you'd have to position it absolutely (or fixed). When you do this, it is no longer affected by content overflowing the height of the page.

A way to implement this that will require JS on IE, is to wrap all your content other than the footer in an absolutely positioned div that will stretch to where the footer begins (by specifying both top and bottom properties). This works well on Firefox but IE will require a small JS hack to work.

Re: two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 8:22 pm
by alex.barylski
Hmmm...well the right side is liekly fixed in height and both columns are fixed in width...

Could I not float the right column into position, placing it before the left in HTML. Then set the left column height to match that of the right column? Actually that won't work...although the content is static if the font changes or browser renders slightly differently then a fixed known height isn't actually known. Damn... :P

Could I not float one left and one right, then clear the float before the footer???

Re: two column fixed width bottom overlapping... :(

Posted: Mon Jul 14, 2008 8:27 pm
by Eran
Could I not float one left and one right, then clear the float before the footer???
You can do that, but the problem is the footer not the columns. If you want the footer to always be at the bottom, you'd have to position it absolutely, if you want for it to flow with the content (content pushing it down when it overflows the screen), you can't do that. It's pick your poison.

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 12:03 am
by alex.barylski
Bah....I'll just use a table I guess...thanks for the help :)

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 1:08 am
by matthijs
Don't give up so soon. It's not as difficult as it seems. Check out http://www.themaninblue.com/experiment/footerStickAlt/

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 3:25 am
by Eran
Nice variations, but doesn't work in IE6..

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 6:45 am
by matthijs
I'm sure it does. Have used and tested in IE6 and 7.

Wait, I'll see what I used exactly, maybe a slight variation of that method. There have been several of those footerstikalt posts

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 7:10 am
by Eran
Test to see if overflowing content pushes the footer down in IE6. If you find one that works - I would greatly appreciate it :)

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 7:15 am
by matthijs
Ok, I've checked and the stickyfooteralt does work for me in IE6 and 7.

What the technique boils down to is this:

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <style type="text/css" media="screen">
        * { margin:0;padding:0; }
    
        html { height:100%; }
        body { height:100%; }
        #container { position:relative;min-height:100%; }
        * html #container { height:100%; }
        #footer { position:relative;margin:-100px auto 0 auto;width:100%;}
        * html #footer { margin-top:-100px; }
 
#content { padding-bottom:120px; } /* make enough room for the footer */
    </style>
</head>
<body>
<div id="container">
<div id="content">
    <h1>header</h1>
    <p>The content </p>
    <p>The content </p>
    <p>The content </p>
    <p>The content </p>
    <p>The content </p>
    </div>
</div>
 
<div id="footer"><p>footer</p></div>
</body>
</html>
 
Quickly tested in IE6 & 7 and FF

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 7:36 am
by Eran
Great! works well :o . It's just missing one detail - need to set the height for the footer to the same amount as the negative margin. You can also forgo the IE6 hack for the footer (* html #footer), it's the same style as the main footer declaration:

Code: Select all

 
 #footer { position:relative;margin:-100px auto 0 auto;width:100%; height:100px;}
 

Re: two column fixed width bottom overlapping... :(

Posted: Tue Jul 15, 2008 8:03 am
by matthijs
Ah yes, the footer height, you're right. people can also set that in ems, if a more flexible height is wanted.
And indeed that ie footer rule isn't needed. I had my PC with IE turned on and was quickly getting nauseous so it was a very quick hack :)