How to match height of floating sibling divs

Question

I have the following situation: http://jsfiddle.net/F3SqM/2/

I have two columns, I only know of the height of columnB. Both columns are floating, and I want columnA to m

Answer 1

Personally I like the equal height columns from www.ejeliot.com

http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }


   

        
Content 1
   
   

        
Content 2
        
Content 2
        
Content 2
        
Content 2
   

Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.