7

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.

8
  • you could put a wrapper div around div to 5 and float it left. Dec 19, 2012 at 12:40
  • @SvenBieder But i want the div1 to div5 to stretch the parent #main's height which they won't i float them.
    – nims
    Dec 19, 2012 at 12:46
  • Have you got a jsFiddle? Dec 19, 2012 at 12:53
  • @starbeamrainbowlabs updated the question with the link.
    – nims
    Dec 19, 2012 at 13:10
  • Just want to make sure I get it right: you want to have the right element #right_al have the same height as #main? Using "float:right" already removed the element from the document flow so this solution will not work. Will try to show another solution without floating elements.
    – SaschaM78
    Dec 19, 2012 at 13:21

2 Answers 2

2

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 :-)

0

Put a wrapper around the "content" divs, and then give that a float of left.

<div id="content-container">
    <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>


// CSS

#content-container { float:left; }
#main { height:auto; }

Before you close the main tag, do a CSS clear. Add this:

<div style="clear:both"></div>
3
  • But then the parent #main gets no height
    – nims
    Dec 19, 2012 at 12:45
  • Edited the code. Add a clear:both. Here's an explanation on that: w3schools.com/cssref/pr_class_clear.asp Dec 19, 2012 at 12:48
  • Now the #main expands to fit both the container and the div i want to scroll, same as my original code+clearing thr right float. btw changed left_al to right_al in the question as to avoid confusion.
    – nims
    Dec 19, 2012 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.