Creating a floating div fills the vertical space when this space is dynamic

Question

Consider the following:

+----------------------------------------+ | Div A | | | | +----------+ +-------------------+ | | | Div B | | Div C | | | | | | | | | +----------+ | | | | | | | ? ? ? ? | +-------------------+ | +----------------------------------------+ 

Div A contains both B and C.

Div B will only hold one line of content.

Div C contains a list of variable counters, so the height varies greatly.

Divs B and C are given widths.

Height Div C controls the height of Div A.

How can I make Div B upright to fit the unknown height of Div C?

For many reasons that you should not go into the table, the tables will not work in this situation.

Answer 1

I stumbled upon this a while ago, and I found this:

http://abcoder.com/css/css-equal-height-columns/

There are solutions for using jQuery or with pure CSS. This worked for me, and I hope this is what you are looking for. Hooray!

Answer 2

There are many ways to do this: Faux Column s.

There is a method described at sitepoint , there are a few more ways , as well as a way to use the CSS3 gradient described by Nettuts

BTW, all of these methods use only CSS, no JavaScript

Answer 3

If you set Div A height, you can set Div B height to 100%

 #divA{height:700px;} #divB{height:100%;} 

or if you are trying to create a 2-page web page layout, you can work with the body

 body{height:100%;} #divA{height:auto;} #divB{min-height:100%;} 

and here is the javascript solution

 <script type="text/javascript"> var h = document.getElementById("divA").offsetHeight; document.getElementById("divB").style.height = h + "px"; </script>