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

Question

HTML:

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS:

.wrapper {
    overflow:hidden;
}

.left {
    width:80px;
    float:left;
    height:100%;
}

How can I give the floating div the full height of the wrapper (whose height is varying)?

is it possible without jQuery?

Test: http://jsfiddle.net/Q6B43/

Answer 1

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.

Answer 2

Add:

body, html { height:100% }

And give your wrapper a fixed height in pixels.