css floating side-by-side divs height 100%

I don't know how to ask this without a picture. I have two divs, side-by-side, within another div with padding and margins as such. This is what I WANT to achieve:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

but here is what I get. I am able to float the divs and compensate for margins, etc, but I can't get div C to extend to the entire height of A. Neither A nor B have a fixed height, so how do I get C to extend to the full height of A?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+---------------------------------------------------------------------------开发者_如何学运维-+

The height of A is stretched by the height of B. It's an entirely fluid layout too, so the width isn't fixed either. Basically, I need C to extend the entire height of A.

I tried playing around with all the heights, but I can't get it to work because the heights aren't fixed :(

A is just a div wrapper basically, no padding, no margin. B is actually composed of two divs with margin and padding, float:left; C is just one div, float:right;

EDIT: I need to support IE as well, WITHOUT CSS hacks

How about making C position: absolute; right: 0; instead of floated? Like so: http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}

Here's a crazy idea and I'd have to work out the CSS, but what if...

A contained B and C C is absolutely positioned against A's right, top, and bottom A had right-padding or margin as wide as C

I don't think this will solve the problem, but it may help.

Whenever I have problems with floats and heights I will put overflow:auto on the parent element. I found this technique on quirksmode.

http://www.quirksmode.org/css/clearing.html

The best and simplest way I know of is to add overflow:hidden to #A and give #C a value of padding-bottom:999em; margin-bottom:-999em;

It even works in IE5!

There is lots written on the net about CSS equal column heights. The solution that I generally use is to use jQuery to calculate the max height of all the columns, and then use jQuery to set the heights of all the columns to the same thing. I normally do this by hand, but there are some plugins that accomplish the task.

If the columns need to be the same height for purely visual reasons, you can be creative with background images on the columns to give the illusion of equal height. This doesn't always work, depending on your design, but I have used it in the past.

Here is a snippet from my personal library that may help you out, also, check out this question and this more specific javascript solution.

Some notes:

• By default, these values are absolute to the <body> elements, unless
• You set the parent's position attribute to either relative or absolute, otherwise the element will be absolute to <body>, or the closest element with position registrations.

/* 
Name: Absolute 100% Height
Author: DSKVR 2010 
Website: http://dskvry.com
*/

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width {
    position:absolute;
    height:auto;
    margin:0;
}

body *.full-height {
 top:0;
 bottom:0;
}

body *.full-height-left {
    top:0;
    bottom:0;
    left:0;
}

body *.full-height-right {
    top:0;
    right:0;
    bottom:0;
}

body *.full-area {
    top:0;
    left:0;
    right:0;
    bottom:0;
}