CODEWITHSUNDEEP
htmlcss
hubert
hubert

Reputation: 273

problems with css and background image

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 ?

Upvotes: 0

Views: 212

Answers (3)

user201218
user201218

Reputation:

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.

Upvotes: 1

hubert
hubert

Reputation: 273

I made it.

The solution was to add 

overflow:hidden;

to the container div.

Upvotes: 0

Aaron
Aaron

Reputation: 2689

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

Upvotes: 0

Related Questions