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

You can use javascript to change the height of any other object, but you can't use CSS alone.

You say the height of B is dynamic, but without your code it's a bit hard to see why it can be dynamic and how I could write the js code for you.

Answer 2

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; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

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.

Answer 3

Quickest fix would be to use display:table-cell instead of floating:

http://jsfiddle.net/F3SqM/1/

However, this will only work in IE8+...

Answer 4

You could put column B inside column A, this would make column A wrap B and thus take the same height.

Answer 5

you can give the required height to the parent element as in this example