I am just stumped. I have a page lay out with 3 columns that I am messing with that I downloaded. I want each column to scroll independent of the other
I have tried overflow:auto, and scroll and about everything else. All I can get the Safari and Firefox browser to do is scroll the entire page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <style type="text/css"> body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;} #header {background:#a31e39;} #outer1 {float:left; width:180px; padding:10px; background:#e0d0d0; overflow:scroll;} #outer2 {float:left; width:180px; padding:10px; background:#b0b0b0; overflow:auto;} #outer3 {background:#c0c0c0; padding:10px; margin-left:400px;overflow:auto;} #outer1, #outer2,q #outer3 {padding-bottom:32767px; margin-bottom:-32767px;} #wrapper {overflow:hidden; background:#c0c0c0;} #footer {clear:both; background:#455c5a;} .content {padding:10px;} h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;} h3 {font-size:18px; margin:0; padding:8px 0;} p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;} #footer p, #header p {color:#fff;} #footer a {color:#fff;} #footer a:hover {text-decoration:none;} </style> <!--[if lte IE 7]> <style type="text/css"> body {word-wrap:break-word;} #outer3 {float:left; display:inline; margin-left:0;} #wrapper {display:inline-block;} </style> <![endif]--> </head> <body> <div id="header"> <div class="content"> <h1>This would be the header part of the page.</h1> </div> </div> <!-- end header --> <div id="wrapper"> <div id="outer1" style="overflow:auto;"> <h3>this woudl be the Main Search</h3> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p> </div> <div id="outer2"> <h3>This would be the results</h3> <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p> <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p> <p>All three columns will end at the footer.</p> </div> <!-- end outer2 --> <div id="outer3"> <h3>This would be the detail</h3> <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p> <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p> </div> <!-- end outer3 --> </div><!-- end #wrapper --> <div id="footer"> <div class="content"> <p>Copyright ©2009 stu nicholls - cssplay.co.uk | <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Flexible%203Cols"; accesskey="C" title="Comments for this Layout">comments on these layouts</a></p> <form action="https://www.paypal.com/cgi-bin/webscr"; method="post"> <div> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="2928152" /> <input type="image" src="http://www.cssplay.co.uk/graphic/paypal.png"; name="submit" alt="" /> <img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif"; width="1" height="1" /> </div> </form> </div> </div> <!-- end footer --> </body> </html> ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://www.cssplay.co.uk/graphic/paypal.png"](http://www.cssplay.co.uk/graphic/paypal.png"){kind=link}
![https://www.paypal.com/en_GB/i/scr/pixel.gif"](https://www.paypal.com/en_GB/i/scr/pixel.gif"){kind=link}