Flexible scroll

[Estilssting]

How to add Scroll bars to div when window is minimized and remove when maximized i try to use this script but its not work\[code\] <script type="text/javascript"> $(document).ready(function () { var bodywidth = $(document).width(); $("#tabMain").width(bodywidth); }); </script>\[/code\]here my div:\[code\] <div class="tabsMainCont" id="tabMain"> <ul class="tabsMenu"> <li><a href="http://stackoverflow.com/questions/12797690/#" id="Profile">Profile</a></li> <li><a href="http://stackoverflow.com/questions/12797690/#" id="Clinics">My Clinics</a></li> <li><a href="http://stackoverflow.com/questions/12797690/#" id="Assistants">My Assistants</a></li> <li><a href="http://stackoverflow.com/questions/12797690/#" id="Mangment">Mangment</a></li> </ul> <div class="tabsContent"> <p>test</p> </div> </div>\[/code\]and this the css i do so far:\[code\].tabsMainCont { margin: 0 auto; padding-top: 19px; width: 1257px;}.tabsMenu{ float:left; overflow: hidden; margin: 0 0 0 0; background: #ffffff; /* Old browsers */background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* IE10+ */background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 100%); /* W3C */filter: progidXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */ border-bottom: 1px solid #D1D1D1; width:100%; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;height:43px;}.tabsMenu li{ float:left; list-style-type:none; border-right: 1px solid #DEDEDE; height:43px;width:340px;}.tabsMenu li a{padding:11px 26px 26px 118px; display:block;color:Black;}.tabsMenu li a:hover{ text-decoration:none; background: #ffffff; /* Old browsers */background: -moz-linear-gradient(top, #ffffff 0%, #eaeaea 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* IE10+ */background: linear-gradient(to bottom, #ffffff 0%,#eaeaea 100%); /* W3C */filter: progidXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */color:Black;}.tabsMenu li a:focus{background: rgb(244,244,244); /* Old browsers */background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* W3C */filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}.tabsMainCont .tabsContent{background-color:White;border-radius:4px;overflow:auto; float:left;width:100%; }\[/code\]the tabsContent div is that one i want it to scroll