problems with css and background image

Question

hello, I have a container with a height of 100% so the height will be dynamically changed to text inside the container.

anyway, the container have a background with a custom image (using background-image).

now, when I create a < div id=blabla" > with { float:left; width: 100px; height:100%; }, the background which defined in my container doesnt show on the div.

but if I remove the float:left, the background does shows up

any ideas what the problem could be ?

Answer 1

It's a little unclear from your question but I'm assuming the floated div is a separate div inside of the container div? By default a floated item is not "contained" by the container. This is just the way floats are supposed to behave. If you put "overflow:auto;" on the container div then you will generally get the behavior you desire, but read a more thorough discussion of the topic here: http://www.ejeliot.com/blog/59

Answer 2

I made it.

The solution was to add

overflow:hidden;

to the container div.

Answer 3

Hi Hubert.

To fix this, add the following as you mention to the container element.

overflow: hidden;

If you are still seeing this issue in IE6/7, you will need to enforce hasLayout, this is done by adding this to the container element.

zoom: 1;

Hope the IE6/7 addition helps you out.