Scrolling the Float

Question

I am quite inexperienced when it comes to HTML/CSS, so please help me out.

I have the following layout

<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 overflow: scroll inside #to_scroll is to show what i want, it doesn't work. The #right_al crosses the parent boundary and clearing the float will increase the parent's size, which i don't want.

jsFiddle link: http://jsfiddle.net/5ycnw/

What i want is

• div1 to div5 lies on the left inside the parent.
• the divs on the left decide the max height the parent div stretches to. The div floated to the right has a child #to_scroll which scrolls when its contents overflow the #main.

A solution i came up with involves fixing the height of the right_al, but the height of the parent #main is subject to the contents on the left divs and i want a CSS only solution.

Thanks in advance.

Answer 1

As mentioned in my above comment, the W3C specs will not allow scrolling containers when no height is given because the container's inner height will be used to define its total height. If using a bit of JS code would be an option, have a look at the following Fiddle:

http://jsfiddle.net/Moonbird_IT/kf3vD/

Here's my HTML structure I used in the demo:

<div id="main">
<div id="main-column">...</div>
<div id="side-bar">
  <div id="side-bar-header">
  Sidebar Header
  </div>
  <div id="side-bar-scroller">
      <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>        
          <li>Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>                
          <li>Option 7</li>
          <li>Option 8</li>
          <li>Option 9</li>  
          <li>Option 10</li>
          <li>Option 11</li>
          <li>Option 12</li>               
      </ul>
  </div>

</div>

​

When the document is completely loaded, height information of the left element (main content element) will be used to set the height of the scrolling element inside the side bar minus the height needed to display the title of the sidebar.

The essential part would be this short jQuery instruction:

$(document).ready(function() {
  var mainHeight=$('#main-column').height();    
  var sidebarHeaderHeight=$('#side-bar-header').height();    
  $('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight);
});​

I tested the code in Chrome only so you will definitely need a bit of fine-tuning there :-)