Geek Answers Handbook

Scrolling float

I am very 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>

overflow: scroll inside #to_scroll should show what I want, it doesn't work. #right_al crosses the parent border, and clearing the float increases the size of the parent I don't want.

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

I want

  • div1 in div5 lies to the left inside the parent.
  • The divs on the left determine the maximum height of the parent div. The div moved to the right has a #to_scroll child element, which scrolls when its contents overflow with #main .

The solution I chose involves fixing the height of right_al , but the height of the parent #main obeys the content in the left divs, and I only want a CSS solution.

Thanks in advance.

+7
source share
2 answers

As mentioned in my comment above, the W3C specifications will not allow containers to scroll when the height is not specified, because the internal height of the container will be used to determine its total height. If using a bit of JS code is an option, look at the following script:

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

Here is my HTML structure that 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 fully loaded, the height information of the left element (the main content element) will be used to set the height of the scroll element inside the side panel minus the height required to display the title of the side panel.

The essential part will 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 only in Chrome, so you definitely need to tweak it a bit :-)

+2
source

Place a wrapper around the "contents" of the div, and then give it a float on the 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 closing the main tag, do a CSS cleanup. Add this:

 <div style="clear:both"></div>
0
source

More articles:


All Articles