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?
display: table
solutionWithin 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.
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.
flex
ible solutionThis 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).
grid
layoutEven 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.