View Full Version : floated divs getting cut off in ie7 and ie6

Nov 9th, 2009, 03:44 AM
At the bottom the sections "Quicklinks" and "Support" (#quickmap and #supportmap) have enough links in them to push the gray div under them #wordmapwrap down and that is what they do in ie8 and firefox.

In ie6 and 7 though the gray #wordmapwrap div is just cutting off #quickmap and #support.

It looks like the middle box there #contactmap behaves the way I want here, even in ie6 and 7. The content in that div is effectively pushing the gray #wordmapwrap div down even in IE6 and 7. So why can't I get the #quickmap and #supportmap to do the same thing in those browsers.

Test site is password protected - find the login info below.
Link: http://bq.dev3.webenabled.net/test02/
Username: iesucks
Password: evilie

html: http://bq.dev3.webenabled.net/test02/index.html
css: http://bq.dev3.webenabled.net/test02/assets/bq-clean5.css

Please, any help with this shall be greatly appreciated.

Nov 9th, 2009, 09:27 AM
I'd suggest removing the negative bottom margins on all those three divs, and floating #contactmap as well. When you do this the bottom padding then becomes visible and you can adjust as required.

Nov 9th, 2009, 09:42 AM
Yeah, except I need the negative margins to hide the padding and I need the padding so that those 3 divs will be equal length. The point is that I don't know exactly what will go in those and new links could be added/rearranged through a CMS later. I have it so that added links to those lists is simple through the CMS and that padding (hidden with the negative margin) is what gives them some room to grow and shrink together.

Hehe, thanks for the advice - but without the negative margins this would be easy to layout.. I'm very close to a solution here on my end but not quite there yet. It's driving me insane.

Nov 9th, 2009, 10:11 AM
How about using faux columns (http://www.alistapart.com/articles/fauxcolumns/) then for #mapcolumns_wrap?

Nov 9th, 2009, 10:24 AM
I guess it is a potential solution but not ideal because as it is they are positioned fluidly. With faux columns I think I would have to make that section fixed width at 760px.

I have almost got it working now. You could see the new version at
and that version is now using this css
same login info

Looks fine ie8 and FF and now if you look at that version in ie7 or ie6 the address and social links are all messed up but at least now the list links in "Quicklinks" and "Support" are effectively pushing the gray div #wordmapwrap down so that fixed the problem. It created a new problem though.

I am considering just replacing the address/social links with some kind of dummy content like a 1x1 transparent gif and leaving it with that formating to fix the problem. Then just put the address and social links back how they were before.. hopefully that should work?

Edit: Still giving me a hard time. I really wish I could just get this version to work. It is doing exactly what I want if I could just get the the address and social links positioned right in IE6/7.. Seems backwards to take the content out and leave a semantically useless element only to put the content back in a new element.

Nov 9th, 2009, 03:40 PM
Well I went ahead and used the workaround and it works, though it is probably not the best solution code wise.
The results can be seen here:
and the css:
Same login and pass..

So at the bottom the links in #quickmap and #supportmap are properly pushing the gray div under them down, even in ie6 and ie7. Why or how this works is pretty much way beyond my comprehension.

The #contactmap was pushing the gray div down but the #quickmap and #supportmap just wouldn't push that gray #wordmapwrap down.. So somehow by putting a container around those two and leaving #contactmap out of the container I got the #quickmap and #supportmap to push down the #contactmap which in turn pushes down the gray #wordmapwrap. Then I took everything I could out of the #contactmap and changed its ID and Classes to #clearmaps. Then I put all that stuff (address, social links) back where it had been in a new div inside the container with #quickmap and #supportmap and called this new div what the old one had been called #contactmap.

Then I made the new #contactmap absolutely positioned so it wouldn't mess up the positioning of the old empty one (now called #clearmaps).

So now the situation is reversed. The links in #quicklinks and #support now push the gray div down but the address and social links in #contactmap don't anymore, which means that if there are less links the address will get cut off. So I still need to find a way to stop #quicklinks and #support from getting smaller than a certain amount.

Unfortunately I have three divs to hold a single 1x1 transparent .png in my html all just for the sake of pushing that gray div down.. #clearmaps contains 2 nested divs and the pic. It seems like I should only need one div or maybe at most one div and the pic.. But three essentially empty divs plus the spacer pic?!? Yet no matter how I try I can't to seem remove any of those elements or the trick breaks.

I am amazed I was able to fix this even if it is a rather ugly workaround. I still do welcome any input on this (a better way?) and I still need a way to make sure those columns can't get too short (that will work across browsers).

Nov 9th, 2009, 08:54 PM
What actually is the requirement here?

I think it is to have three columns, with (different) backgrounds, with a flexible height to allow for additions via CMS, and also a minimum height. Is that it?

Nov 10th, 2009, 01:55 AM
Yeah pretty much. The original version worked exactly how I wanted it too in IE8 and Firefox. So I just wanted that exact setup but I wanted it to work in IE6/7 too.

So yeah, three equal height columns. The columns are fixed width but the layout (space between them) is fluid. That whole footer section also sticks to the bottom of the page if there is not much content above it but it will still get pushed down off the page like a normal footer if there is more content (this complicates the equal height columns in the footer).

It is working fine now in all browsers except that with less links it would cut off the address. I think that shouldn't be so tough to fix at this point though.

I am just not all that happy with my insanely complicated solution which I don't understand at all, because it introduced 4 semantically meaningless elements to my HTML. At least it works now though.

Nov 11th, 2009, 01:27 PM
Turns out it still isn't working in IE6..

Well at least I got it working in IE7 but I still need a fix for IE6.. Any ideas??

Edit: Actually I finally got it working perfectly.. Though I would be deeply impressed if anyone could actually explain why this works in all browsers. I haven't a clue, I just tried every which way imaginable until it worked in all browsers. I understood it originally when it worked in ie8 and FF, but now that I finally got it working in ie6 and 7 - well it had to be remade in some way more complicated manner that I don't even understand. I guess it works though.

Edit: Oh yeah, this working version is here:
and the css:
Same login and pass.. iesucks:evilie