How to Make a Floated Div 100% Height of Its Parent

How to make a floated div 100% height of its parent?

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer's height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there's no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

Floated div, 100% height

1. Set the three elements' container (#footer-gradient) display: table
2. And set the elements themselves (.col) display: table-cell
3. Remove the floating.
4. Success.

#footer-gradient {
    display: table;
}
#footer-gradient .col {
    display: table-cell;
    float: none;
}

Set floating div to height: 100%?

You could do it by setting up a table-like scructure of <div>s in your HTML and then using display: table, display: table-cell, etc. This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 and below do not support display: table.

jsFiddle

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</div>

#wrapper       { display: table; }
#inner-wrapper { display: table-row; }
#left          { display: table-cell; }
#right         { display: table-cell; }

I had to remove float: left and float: right from #left and #right to get the table-cell display to work, since table cells can’t float. However, this has stuck the two divs together. And table cells do not accept margins, only padding. You may need an extra display: table-cell div between left and right to separate them, if you don’t want padding separating them.

Read more about display: table and family on QuirksMode and on MDN.

Floated div 100% height of dynamic parent without absolute position?

As I know only block with position:absolute may be 100% height and its children too.

If you sure that .catb2 has the biggest height of .catb* try to add wrapper:

<div class="catbg0" id="b1">

    <div class="catb2">Board Name</div>

    <div class="wrapper">
        <div class="catb1">#</div>
        <!-- margin == catb2 width -->
        <div class="catb3">Topics</div>
        <div class="catb4">Posts</div>
        <div class="catb5">Last Post</div>
    </div>

    <div class="clearboth"></div>

</div>

CSS

.catbg0 { position: relative; }
.wrapper { position: absolute; width: 100%; height: 100%; }
.catb2 { margin-left: /* catb1 width here */  }

P.S. Maybe it'll be usefull for you - A new micro clearfix hack

How to float an element left with full height of the wrapper?

The display: table solution

Within tables each cell of a row has the same height.

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

This is the best solution in my opinion, but is not compatible before IE8.

Here is the Fiddle for this solution.

Using absolute positioning

Absolute positioned elements respect their relative parents height:

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

Normally I would not recommend absolute positioning in most situations. But as you have a fixed width anyway, maybe it does not matter. But be aware of the fact that this will ignore long contents in .left. The height is just controlled by .right.

Here is an update to your Fiddle.

The flexible solution

This is so new I would not recommend using it right now, but just to be complete. You could use CSS3 flex, but be aware of browser compatibility:

.wrapper {
    display: flex;
}

The Fiddle (tested in current Chrome and Firefox).

The grid layout

Even newer than flexbox, CSS grid seams to be the perfect answer for layout questions.

.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

Browser compatibility is rare, if you go back a view versions. Besides, it would be overkill for the OP's scenario in my opinion, but for more complex layout troubles in the future, this is a very powerful thing.

See it in the Fiddle.

How to make floated left child div 100% height of a centered parent div

This answer absolute positions the green block item inside of parent so the height of the parent is determined by the content within. You will have fewer cross browser compatibility issues with this solution.

.parent {  width: 250px;  height: auto;  margin: 0 auto;  background-color: blue;  position: relative;}
.first {  background-color: green;  height: 100%;  width: 50px;  position: absolute;}
.second {  background-color: red;  width: 200px;  height: 200px;  float: right;}
.third {  background-color: yellow;  width: 200px;  height: 200px;  float: right;}
.clear {  clear: both;}

<div class="parent">  <div class="first"></div>  <div class="second">    qwef awef qawe fawe f  </div>  <div class="third">    qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f  </div>  <div class="clear"></div></div>

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

#parent {
    background: red;
    height: auto;
    overflow:auto;
}
#child {
    float:left;
}