.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; }
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; }
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
#tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a windows-like interface with jQuery UI</title>
<link rel="stylesheet" type="text/css" href="mtl.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$( "#tabs" ).tabs();
})
</script>
<style>
.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; }
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; }
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
#tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }
#tabs {height: 100%; overflow: 'auto';}
</style>
</head>
<body>
<div id="tab_container" class="dialog_window" title="Tab Window Title">
<div class="content_container_1">
<div id="tabs">
<ul>
<li><a href="#tabs-1">jQuery UI</a></li>
<li><a href="#tabs-2">jQuery</a></li>
<li><a href="#tabs-3">ThemeRoller</a></li>
</ul>
<div id="tabs-1" style='max-width:400px;height:450px;overflow:auto; '>
<p>
<img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more.
</p>
<p>
Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy.
</p>
<p>
Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers.
</p>
<p>
<a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a>
</p>
</div>
<div id="tabs-2" style='max-width:400px;height:450px;overflow:auto;'>
<p>
<img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.
</p>
<p>
On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more.
</p>
<p>
jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript!
</p>
<p>
<a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a>
</p>
</div>
<div id="tabs-3" style='max-width:400px;height:450px;overflow:auto;'>
<div id="draggable3" class="dialog_window" title="Traced Modules Minimize">
<div class="css-tvw">
<ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2"><a>SubmitBWTable [ Submit ]</a></label>
<ul>
<li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
<ul>
<li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
</li>
</ul>
<ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2">SubmitBWTable [ Submit ]</label>
<ul>
<li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label>
<ul>
<li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label>
<ul>
<li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>