CODEWITHSUNDEEP
htmlcss
kthornbloom
kthornbloom

Reputation: 3720

CSS Layout: One side scrolls, other side sets height

It seems like it should be simple, but I'm having trouble achieving this layout. It's a set of two columns using CSS display:table-cell. The right column has a responsive image that should set the height for both. The left column has text that should scroll if needed. Please see the JSFiddle: http://jsfiddle.net/xThB7/

<div class="details-wrap">
    <div class="details">
        <div class="scroll">
            Lorem ipsum
        </div>
        </div>
    <div class="details-image">
        <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg" />
    </div>
</div>

I'm open to any solutions, although I'd like to avoid using JS

Upvotes: 1

Views: 1537

Answers (1)

ekans
ekans

Reputation: 1714

You just need to add height: 100% to .details and .scroll class:

.details {
    display:table-cell;
    vertical-align:top;
    width:50%;
    background:#ccc;
    line-height:1.5em;
    height: 100%;
}

.scroll {
    padding:15px;
    overflow:auto;
    height: 100%;
}

fiddle: http://jsfiddle.net/xThB7/2/

Upvotes: 3

Related Questions