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/

Sorrento

I actually have the same problem, I only managed to do it with jQuery. I'd be glad to know if it's possible otherwise. – Bobolink

Possible duplicate of How to make a floated div 100% height of its parent? – Wellesz

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.

Curry

Just because an element has a fixed width doesn't mean absolute positioning is safe to use; it is the length of the element that causes problems. – Schaaf

@cimmanon, I agree. That's why I posted alternatives. But in the given example the only problem is the content of the right <div/>. So please let me dream that Martin knows for sure the left content is one line anytime. ;-) In that case, it would do the job I think. Not true? – Curry

I can't imagine very many instances where an instance of equal height columns has a single line's worth of content in one of the columns. Would be an inefficient layout if that were the case. It is always safest to assume that either/any column could be the taller one because it is the most likely scenario. – Schaaf

@cimmanon, well, I reordered and modified my answer and tried to meet your correct objection. – Curry

Thanks, the solutions work here. Table and fixed wrapper heights are not possible. – Sorrento

If you use top: 0 and bottom: 0 on the absolute positioning solution, the column will stretch to match the height of his relative parent. – Harebell

BTW, this layout is called "faux columns" ans is discussed on alistapart.com and I'm sure smashing magazine has an article about this too. Just google it. – Harebell

Answer 2

Add:

body, html { height:100% }

And give your wrapper a fixed height in pixels.

Heth