javajoemorgan Posted January 23, 2008 Share Posted January 23, 2008 I have a content area and a navigation menu inside divs. I have the overflow set to auto, and I want them to show scrollbars if they are larger than the physical screen. Right now, only the whole screen gets the scrollbar, I want ONLY the divs to have a scrollbar ONLY if they need it. Many times, the navigation menu will not need a scrollbar, but the content area will almost always need one.Here is my style: <style type="text/css"> body { height: 100% } .cqContainer { width: 100%; height: 100%; } .cqContainer .cqContent { float: left; width: 75%; height: 100%; overflow: auto; border-right: 4px blue solid; } .cqContainer .cqNav { float: right; width: 24%; height: 100%; overflow: auto; font-family: Arial; font-size: 10pt; font-weight: bold; } .cqContainer .cqNav a { text-decoration: none; } .cqContainer .cqNav a:hover { color: red; }</style> Basically, the body works out to: <body> <div class="cqContainer"> <div class="cqContent"> <!-- a whole bunch of stuff --> </div> <div class="cqNav"> <!-- some stuff, may be a whole bunch --> </div> </div></body> This is easily done with frames, but I am sure there is a way and I just can't figure it out.Joe Link to comment Share on other sites More sharing options...
newseed Posted February 2, 2008 Share Posted February 2, 2008 You have to give your div a fixed height in order for it to work: cqContainer .cqContent { float: left; width: 75%; height: 400px; overflow: auto; border-right: 4px blue solid; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.