CSS question ... been bugging me for a while
ItalianMike (301 pencils) | Wed, 2006-04-12 08:10I have a question about CSS that's been bugging me for quite sometime, I'm hoping I can finally get an answer on it.
Here is the scenario, when working on the inside of a page I will make a div, let's call it #container, with the intention that it houses two other divs. These two divs are assigned a class and given a float property. If we give them a temporary border, we can see something like this:
You can see two columns floating next to one another, everything is perfect. However if you give a temporary border to the #container div that is housing them, we see something like this:
I know the picture is small but if you look closely the #container div is flat right on top of the other two divs.
Can someone explain to me why this happens and how I prevent it? I know this is a result from the float property, which has always worked a bit weird. How can I make the #container expand around the other two divs as it should?
The only thing that seems to work is assigning it a min-height.
Commenting on this Forum topic is closed.
I have a thought, that the container needs
overflow:hidden;which will make the container stretch down the full depth of the two boxes, and just leaving the width of the container to be delt with.Is this happening in all browsers?
Could you post the code or live example? it would be much easier to debug the problem if so...
__
Goo
Nailed it right on ... cool
-------------------------------
Infinite Style
Thanks for the update.
__
Goo
If you float the container, that will also allow it to expand.