Background image not displaying in IE6 in a cleared div

position: bottom, in a right column, clearing left column

[PublicSphere]

I have a problem where I cannot get the background image in my right column to fully display in IE6.

I have a container div, in which I have a left column floated left. I have a right column, with its left margin equal to the width of the left column.

That displays fine.

I also have a div inside the right column div, which has the id applied to it that should make it display my background image, like so:

#sidebar {
background-image: url(images/grayscayle_leaf.gif);
background-position: left bottom;
background-repeat: no-repeat;
display: block;
padding: 40px 0px 0px 0px;
margin: 0;
/*background-color: Aqua;*/
}

At the bottom of my sidebar div, before the </div> I have another empty div with its id defined with clear: both.

So the empty div at the bottom of the sidebar pulls the bottom of the sidebar below the left column.

This works fine in both FF and IE. However in IE the background image grayscayle_leaf.gif does not fully display. It only displays about 20px of height at the bottom of the sidebar div.

Anyone got any idea what's going on here?

Maybe someone has experienced this before?

I think it's a fairly common problem -- but useually using the clear function to clear the larger column does the trick with the bg image.

Really appreciate any comments -- sorry if my description is a bit difficult to understand.

[PublicSphere]

...oh and the reason I don't just put the greyscayle leaf image in the right column div (the parent of the sidebar div) is because it already has a background image like so:

#right {
background-image: url(images/main_top_2.jpg);
background-repeat: no-repeat;
background-position: -589px 0px;
padding: 0;
margin: 0 0 15px 589px;
text-align: left;
/*background-color: Fuchsia;*/
}

[Drag_Racer]

put a width and height to your sidebar div at least equal to your image to display it all. floating a div will make it collapse in width, and div's collapse in height by default, to the contained content.

[Drag_Racer]

overflow:visible; may help also.

[PublicSphere]

Thanks for your advice Drag_Racer.

Unfortunately neither solutions worked here.

When I give #sidebar a height attribute, it no-longer stretches vertically down to the same length as the longer left column.

The overflow: visible did not change anything.

Without defining a width attribute to sidebar or the right column, it displays correctly (structurally). When I add a width to the sidebar the right column no-longer lines up alongside the left column; instead it is forced down below.

Thanks for your help anyway -- but there must be another solution.