Child div 100% height to parent auto height
By reading your comments on other solutions it is clear to me that only solution for you is to implement some JS into your code. This is not a problem, however.
http://jsfiddle.net/b7TuP/
Make the right div position:absolute;
and make the parent div position:relative;
and then height:100%;
will work for the right div. Make sure you also adjust its x-position and width accordingly. In this example I gave it a left:50px
to make sure it appears to the right of the left column.
JSFiddle http://jsfiddle.net/e9mvD/
You can use the table-cell
value of the display
property in this layout and remove the float
like this:
.left, .right{
display:table-cell;
}
live demo http://jsfiddle.net/C9Kmx/34/
You can accomplish this using flexbox and some creativity.
.container {
display: flex;
background: black;
padding: 5px;
width: 300px
}
.left {
height: 200px;
flex: 1 0 0px;
background: blue;
}
.right {
flex: 1 0 0px;
overflow: auto;
background: green;
}
.column {
display: flex;
flex-direction: column;
width: 20%;
}
<div class="container">
<div class="left"></div>
<div class="column">
<div class="right"></div>
</div>
</div>