CODEWITHSUNDEEP
css
Alan Larimer
Alan Larimer

Reputation: 598

Scrolling div within a non-scrolling div

Current code: http://jsfiddle.net/GDZpm/2/

I would like to have the rightSideDetails class div contents scroll, not the rightSideContainer class div. My attempts have yielded text overflow into the lower division or a visible (but disabled) scroll bar in the content area.

.mainContent {
position:relative;
width:275px;
}
.leftSide {
position:relative;
min-height: 485px;
}
.rightSide {
position:absolute;
top:0px;
left:100px;
}
.rightSideContainer {
height:175px;
overflow:auto;
}
.rightSideHeader {
padding-left:30px;
padding-top:6px;
padding-right:20px;
font-size:10px;
font-weight:bold;
font-size:14px;
}
.rightSideDetails {
padding-left:20px;
padding-top:15px;
padding-right:30px;
font-size:12px;
}

Thank you.

Upvotes: 1

Views: 87

Answers (1)

bradcush
bradcush

Reputation: 528

I've deleted overflow: auto; and added height and overflow-y rules to the selector for the content div mentioned. You can substitute the values to fit your needs.

.rightSideDetails {
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 30px;
    font-size: 12px;
    overflow-y: scroll;
    height: 100px;
}

Upvotes: 1

Related Questions