two column fixed width bottom overlapping... :(

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

two column fixed width bottom overlapping... :(

Post 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 :)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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...
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

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

Post 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
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

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

Post 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???
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

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

Post by alex.barylski »

Bah....I'll just use a table I guess...thanks for the help :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post by matthijs »

Don't give up so soon. It's not as difficult as it seems. Check out http://www.themaninblue.com/experiment/footerStickAlt/
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post by Eran »

Nice variations, but doesn't work in IE6..
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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 :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post 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;}
 
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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 :)
Post Reply