29

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/

Martin
  • 2,007
  • 6
  • 28
  • 44
  • 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. – Romain Braun Apr 04 '13 at 16:47
  • Possible duplicate of [How to make a floated div 100% height of its parent?](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) – user Mar 04 '17 at 11:44

2 Answers2

57

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.

Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
  • 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. – cimmanon Apr 04 '13 at 17:58
  • 1
    @cimmanon, I agree. That's why I posted alternatives. But in the given example the only problem is the content of the right `
    `. 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?     – Linus Caldwell Apr 04 '13 at 18:06
  • 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. – cimmanon Apr 04 '13 at 18:19
  • @cimmanon, well, I reordered and modified my answer and tried to meet your correct objection. – Linus Caldwell Apr 04 '13 at 18:32
  • Thanks, the solutions work here. Table and fixed wrapper heights are not possible. – Martin Apr 04 '13 at 20:38
  • 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. – Justus Romijn Apr 05 '13 at 06:02
  • 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. – Justus Romijn Apr 05 '13 at 06:04
-10

Add:

body, html { height:100% }

And give your wrapper a fixed height in pixels.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176