I am a beginner in HTML/CSS and need some assistance.
Here is the layout I am working with:
<style>
#main {background-color: red; width: 30%;}
#right_al{float: right;}
#to_scroll{overflow: scroll;}
</style>
<div id='main'>
<div id='right_al'>
CONTENT#foo
<div id='to_scroll'>
ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />
ZZZ<br />ZZZ<br />ZZZ<br />
</div>
</div>
<div id='div1'>CONTENT #1</div>
<div id='div2'>CONTENT #2</div>
<div id='div3'>CONTENT #3</div>
<div id='div4'>CONTENT #4</div>
<div id='div5'>CONTENT #5</div>
</div>
The use of overflow: scroll within #to_scroll is not working as intended. The #right_al element extends beyond the parent boundary, and clearing the float would increase the size of the parent, which is undesired.
Link to jsFiddle demo: http://jsfiddle.net/5ycnw/
What I am aiming for is:
- div1 to div5 positioned on the left inside the parent.
- The height of the parent div should be determined by the content of the divs on the left. The div floated to the right contains a child element
#to_scrollwhich should scroll when its content overflows the#main.
I have considered setting a fixed height for right_al, but I want the height of the parent #main to adjust based on the content of the left divs without using JavaScript.
Thank you for your help!