CSS FF Footer -- clear:both isn't working

I've tried a lot of fixes, but the container height seems to be stuck.

[Forehand]

Like many posts before, I have a site working in IE and not FF.

I have three page templates for different page levels, all of which have floated div elements within a container div. I've placed <div style="clear:both"></div> after the last floated element in each container div, and I still can't get the container div to expand with the content in FF. Much of the instruction about multi-column layouts point to the additional element to extend column heights.

The strange behavior with this is that on all three page types, the container div is the same height, though no height attribute is designated in the stylesheet (approximately the vertical size of the screen. Adding overflow:auto; to the container div produces the scroll and stops the bleeding over the footer, but it only illustrates that the container div is not expanding as expected. I've also tried specifying height values, etc., but the the container div just won't budge.

I'm thinking that this is an issue with the floats, because IE works as expected, and it autofloats.

Any thoughts?

CSS:
/*Global container*/
#container {
width: 980px;
height:auto;
z-index: 1;
padding: 0px;
margin: 0 auto;
text-align:left;
background:#FFFFFF;
}
/* Container that holds the content!This is the element that won't budge! */
#body, #bodyPrint {
margin: 0px;
width: 100%;
clear:both;
height:100%;
display:block;
float:none;
}
#body:after, #bodyPrint:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Left column */
#bodyleft {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin: 0px;
width: 70%;
height: 100%;
float: left;
clear:left;
background:#FFFFFF;
}

/* Right column */
#bodyright {
padding-left: 2px;
padding-right: 5px;
padding-top: 5px;
width: 28%;
height: 100%;
float: right;
z-index: 3;
background:#FFFFFF;
clear:right;
}

#footer {
border-width: medium;
border-style:solid;
width: 100%;
height: 25px;
padding: 3px;
z-index: 3;
clear:both;
text-align:center;
}

Here's an example: <oooops no it's not! see TOS#13 [webmasterworld.com] linked on every page>

Thanks in advance for your help.

[edited by: SuzyUK at 8:46 pm (utc) on Sep. 4, 2006]

[cuce]

whats this clear:left and clear:right all about? I dont think thats neccessary. try without

[doodlebee]

I have a site working in IE and not FF.

Get it working in Firefox first and save yourself a lot of headaches :)

Well, I tried to validate the page (which is always the first thing you should do) - and you've got a lot of errors. One is that you have no doctype set. You also have several divs that are closing items that aren't open - which makes me wonder if you're closing divs in the wrong place, causing your problem.

Your markup is *so* convoluted - I've never seen so many divs in my life. I don't even understand what they're all for - you have a simple fixed-width 2 column layout - there's no need for all of those divs.

Your link will also be removed by someone soon, as links aren't allwed here.

I suggest you rethink the layout and go simpler - google for a 2-column template and make your life a while lot easier. Wading through all that is near impossible! But if you're going to *keep* it, you're going to have to wade through it and find your messed up div closers (I'm going blind even trying to find them.)

[Forehand]

Thank you both for your reply.

The doctype is a known problem -- an issue I'm working on with a CMS vendor.

The clear:left and right were experiments that didn't work out, and I've deleted them.

I'll work towards simplfying the layout.

Per providing links, this was my first post. If links are not allowed in the post, it would be helpful if that were posted in teh "Help on creating messages" list, so newbies like me have that guidance in front of them when posting.

Thanks again.