HTML Overflow


I have this fiddle

I use some css:

#body { overflow-y:scroll; }

to make the content area scrollable, so you don't have to scroll the page.

My aim is to have a full height side bar at all times, so I figured that I have this content element #body have a scroll and it be fine. However, it makes the border really weird when scrolling data, the bottom border isn't just scrolling it's redrawn, how do I get past that? If someone could just help me tidy up the css and elements based on the information that would be great

Part 2: I want there to be two panels, the left fixed width and the right taking up the remainding width of the screen? how do I do this so that I can have #body take up 90% of the second panels' width without having to set a fixed width with loads of left margin?


I think the problem is that the #body element (might want to rename for clarity since theres already an html body element) is partially hidden under the sidebar.

If you give it left:300px then the scroll bar is no longer hidden but you are left with the issue of the right pane needing a width which will be determined by the size of the browser window.

Have a look at this: CSS Layout 2-Column fixed-fluid which links to this article : for ideas on how to do that.