IE6 Hatred and HELP PLEASE

[Designer42]

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.

Explanation:
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
<div id="SideBoxTop"></div>
<div id="SideBoxMiddle">
<div id="SideBoxContent">
<h2>Dinosaur Game</h2>
<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–>
<div id="SideBoxBottom"></div>

CSS
#SidebarLeft{ width:237px; height:auto; float:left; margin:0 4px 0 0; display:block; }

#SidebarRight{ width:237px; height:auto; float:right; margin:0 0 0 0; padding: 0 7px 0 0; display:block; }

#SideBoxTop{ background:url(images/BoxTop.gif); width:235px; height:22px; float:left; padding: 0 0 0 2px; }

#SideBoxMiddle{ background:url(images/BoxSlice.gif) repeat-y; width:235px; height:100%; float:left; padding: 0 0 0 2px; }

#SideBoxBottom{ background:url(images/BoxBottom.gif); width:235px; height:34px; float:left; margin-bottom:3px;
padding: 0 0 0 2px; }

#SideBoxContent{ width:200px; height:auto; color:#000000; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:0 0 0 20px; }

#SideBoxContent p{ margin-top:10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; }

#SideBoxContent a{ color:#902c1d; text-decoration:none; font-weight:bold; padding:0 0; }

#SideBoxContent a:hover{
background:#d99a28; color:#FFFFFF; text-decoration:none; font-weight:bold; }

It is not the link causing the problem like I though stated in the picture.

[Designer42]

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?

[Designer42]

I fixed it But I hate it, it is messy and I Vote to abolish it and anyone who has IE6 they should automatically be made to download Firefox or IE7 or 8. Or just do away with IE all together.

All in Favor type, AYE!

[Author]

Posts