firefox and height: auto; 1

[phrozt]

having some trouble making firefox do an auto height. Basically, I created a container, and I'm floating 2 other containers inside of it. The main container is set to auto, as well as the left container (the right one will have overflowing content that should push both left and main containers down).

IE is pushing down the main container, and not the left container (which is fine, because the bg-color of the main container takes care of extra left container space)

FireFox is not pushing either down, which is causing a few problems. I've been searching around, and can't really find anything to make FireFox use height: auto; correctly. Was wondering if perhaps you guys knew a tip or trick.

-note: already tried height: auto !imporatnt;

Thanks guys.
-P

 

[manarth]

Basically, I created a container, and I'm floating 2 other containers inside of it.

Floats are taken 'out of the flow' - they won't push anything down (in a standards-based box model). If there's nothing else in the container other than floated elements, it collapses.

The answer is to put a clearing element within the container div, underneath the floated elements:

<div class="container">
  <div class="left">
    ....
  </div>

  <div class="right">
    ....
  </div>

  <br style="clear:both;" />
</div>

IE is pushing down the main container, and not the left container

For that you'd want height:100% on the left container - but as it's floated, it won't inherit height from a parent anyway.

The code above still won't do anything about the left side...but it sounds like that's not an issue. It will force the container div to expand.

<marc>

 

[phrozt]

Thank you very much. That did the trick for the main container! I still don't know how I'm going to fix the other container, but I'll play around w/something