DorFruishuriz
New Member
I'm new to HTML/CSS, so bear with me. I have seen similar questions been asked on SO and other places, but can't get them to work in my case. I have a simple two-columns layout. The left column shows a "filter" textbox on the top with fixed height, and a TreeView (ASP.NET) below it. Since TreeView doesn't seemingly have any property to support scrolling, I'm enclosing it in another div. The right column will show results based on the selected tree node.Here's my HTML:\[code\]<body class="page"> <div class="leftCol"> <div> <input type="text" id="txtFilter" class="SearchTextBox" /> </div> <div id="ForScrollBar" style="height: 100%;"> A TREEVIEW HERE </div> </div> <div class="rightCol"> </div> <div style="clear: both;"/></body>\[/code\]And here is my CSS:\[code\]<style> .page { width: 900px; margin: 0px auto 0px auto; border: 1px solid #496077; min-height: 460px; height: 100%; } .leftCol { position: relative; border: 1px solid; float: left; width: 275px; height: 450px; min-height: 450px; } .rightCol { position: relative; border: 1px solid; float: right; width: 620px; height: 450px; min-height: 450px; } .SearchTextBox { border-style: solid; border-width: 1px; height: 30px; width: 270px; margin: 0px; }</style>\[/code\]Now I'm facing the following issues:[*]The div "ForScrollBar" spills out of the parent div leftCol, even though I've set it to 100% and expect it to fill the remaining height of leftCol.[*]I want body to fill the page height, but can't get that to work.Any help will be greatly appreciated.Note: I'd love to avoid JS or jQuery if possible, but would go for it if it is the only way to have browser compatibility.