blankzukelgny
New Member
I'm having a problem where I'm trying to add a splitter to my page. Unfortunately, the jQuery script to add the splitter is messing around with my layout.Here is a jsfiddle for you to have a look at what is happening.http://jsfiddle.net/dUTdN/1/Does anyone know a way to ensure that the splitter is stretched horizontally with the content (into scrollable territory) by using the jQuery splitter script from http://methvin.com/splitter/ in the jsfiddle example above?If any more information is required, please ask. CSS:\[code\]html,body { height: 100%; margin:0; padding:0;}#wrap { background-color: purple; min-height: 100%;}#header { background-color: yellow; height: 50px;}#pageheader { background-color: orange; height: 50px;}#mybody { background-color: red; overflow-y: auto; position: absolute; bottom: 50px; top: 100px; left: 0px; right: 0px;}#splitter { background-color: green; height: 100%; position: relative;}#sidebar { background-color: blue; width: 100%;}#content { background-color: white; width: 100%;}#footer { background-color: gray; position: absolute; bottom: 0; height: 50px; width: 100%;}.vsplitbar { width: 5px; background: #cab;}\[/code\]HTML:\[code\]<div id="wrap"> <div id="header"> Site Header -> Welcome to my site </div> <div id="pageheader"> Page Title -> You are currently viewing the main page </div> <div id="mybody"> <div id="splitter"> <div id="sidebar"> My Sidebar<br />Menu Item 1<br />Menu Item 2<br />Menu Item 3<br />Menu Item 4<br />Menu Item 5 </div> <div id="content"> This is where all the content will go.<br /><br /> Assuming your window is small enough, you should be able to scroll this section. If you do, you will see that the background colour changes to red and the splitter is no longer shown below that point. <br /><br /> Is anyone able to figure out how to change this configuration so that I can have a section that stretches horizontally to fit the content with a splitter?<br /><br /> asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br /> asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br /> asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br /> asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br /> </div> </div> </div> <div id="footer"> Website Footer -> Copyright and all that junk. </div></div>\[/code\]Scripts:\[code\]$().ready(function() { $("#splitter").splitter();});\[/code\]