CODEWITHSUNDEEP
javascripthtmlcss
Drew
Drew

Reputation: 6274

making floated div fill vertical space when that space is dynamic

Consider the following:

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

Div A contains both B and C.

Div B will only ever hold one line of content.

Div C contains a list of variable item count, so the height is highly variable.

Divs B and C have set widths.

Div C's height drives the height of Div A.

How can I make Div B expand vertically to match the unknown height of Div C?

For a variety of reasons not worth getting into, tables would not work in this situation.

Upvotes: 4

Views: 1469

Answers (3)

Lea Cohen
Lea Cohen

Reputation: 8190

There are many ways to do such a thing, it's called "Faux Columns".

There is a way descried on sitepoint, there are a few more ways, and there's a way using CSS3 gradient described by Nettuts

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

Upvotes: 2

Pastor Bones
Pastor Bones

Reputation: 7351

If you set Div A's height, you can then set the height of Div B to 100%

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

or if you're trying to make a 2 column webpage layout you can work off of the body

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

and here is a Javascript solution

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

Upvotes: 0

Vern
Vern

Reputation: 2413

I ran into this awhile ago and I found this:

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

There are solutions for using jQuery or with pure CSS. It worked for me and I hope it's what you're looking for. Cheers!

Upvotes: 4

Related Questions