So I am working on a project for work. Take a look at Jpg attachment and explanation will make much more sense
In IE 6 the height of my sidebar container is not holding the divs together.
I have 1 side bar container div height set to auto and have tried 100%
3 divs to make up 1 box
Top Div with top box image
Middle Div set to stretch vertically
Bottom Div with bottom box image
4 boxes, 2 per side of page
Got that pictured? Ok now for the jacked part.
The thing is in IE6 (devil of browsers) but need it for 30% of our users, the bottom boxes the Bottom Div is separating from the Middle Div. Take a look. Even in the internal pages the right side bar has 3 Boxes but still the bottom Div separates from the Bottom box’s Middle Div
I need suggestions. I have tried negative margins, works, BUT, messes up other boxes with same Div id’s. i have tried specifying different names for just the problem boxes, BUT they are used on the internal pages and the issue still happens. HELP PLEASE.
Thanks in advance
Site is not live yet so…
Here is HTML
<center style="background-color:#e6efe6; width:100%;"><a href="/dinosaurs/dinosaur-game/"><img src="/dinosaurs/files/media/image/gamepromo2.gif" width="150" height="150" /></a></center> <br />
<a href="/dinosaurs/dinosaur-game/">Play here >></a></div><!—End Side Box Content–>
</div><!—End Side Box Middle–>
what happens if you remove the height from the center div? get rid of the height:100%. I don’t think you need to specify a height here because you can use the content to push down on the bottom of the box and the div will expand to fit your content without the height value. then just add a bottom padding on the content to make sure it has enought room to display the bottom of the box
oh, one other tip. when I am faced with issues like this. I like to add a temporary background color to the elements in question. To give myself a visual of what could be causing the trouble. The temp background color might fill in the space telling you where the "leak" is coming from that is causing that extra space.
You have also floated the side boxes but i don’t see anywhere in your code where you have cleared the floats. i don’t know if you need to everytime you float something. But you might try it and see what happens
I have realized it has to do with the Bottom Div. I position the Bottom Div absolute, it the butts up against the bottom of the middle Div, BUT, the it does not push the footer div down. It overlaps the top part of it. Is there a way to put the position absolute and then push the Div below that down?
I feel your pain- and to some extent I have ceased support for IE6. I do ensure that any website that I build does work in IE6 and is functional – but if there are layout issues that take too much time to fix for just one old browser – then I remove those elements from the ie6 version (via conditional comments) and offer those IE6 users a less rich web experience, but still full access to the content. There are a growing number of high profile web sites and web agencies who are dropping support for IE6.