Height size and float elements

Question

I have problem with resize elements. I have one div element ".hal" which is absolute position and height is 100%. Inside another element ".wrapper" I have floated elements, when I set more floated elements .hal element is no longer reacting on size of .wrapper also the same situation is with body.

Here is example

<div class="wrapper">
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="fix"></div>
</div>
<div class="hal"></div>

--

.wrapper {
    float: left;
    background-color: #ffcc00;
}
.block {
    float: right;
}
.blue {
    background: #00a2e8;
    padding: 50px;
    margin-right: 50px;
}
.yellow {
    background: #fff200;
    padding: 20px 100px;
}
.hal {
    height:100%;
    width:20%;
    background-color:#333333;
    position: absolute;
}
.fix {
    clear:both;
}

Answer 1

Your .hal element is not inside the .wrapper. I believe you did some testing.

However, to make it work like I think you intend, try put the .hal element in top inside the .wrapper and add following to your .wrapper css

position:relative;